与WebPack使用babel transpiler的麻烦

我试图在我的应用程序中使用this包。与WebPack使用babel transpiler的麻烦

它似乎写在ES6所以我需要一个像babel的转译。我已经开始一个新项目，并尝试以下内容：

创建新的索引.html/.js文件进行测试。
npm install audio-effects
npm install gulp gulp-babel babel-preset-es2015
创建.babelrc

试图从dist文件夹python -m SimpleHTTPServer运行此之后，我得到了一个错误：index.js:3 Uncaught ReferenceError: require is not defined。

经过一番挖掘，这是因为require can't be used client-side。所以接下来我使用WebPack来让我使用require。

我走进我的dist文件夹（其中我transpiled JavaScript是），跑：

webpack ./index.js index.js

但现在我得到错误index.js:78 Uncaught SyntaxError: Unexpected token import。

任何人都可以看到我失踪（除了NPM-ES6-Gulp-WebPack教程）吗？我似乎陷入了WebPack和Transpiling的循环。

的index.html

<!DOCTYPE html> 
<html> 
<body> 

<h4>Welcome</h4> 

<button onclick="startAudio()">Start Audio</button> 

<script src="js/index.js"></script> 
<script type="text/javascript" src="bundle.js" charset="utf-8"></script> 

</body> 
</html>

index.js（预通天塔/的WebPack - ification）

import {HasAudioContext} from 'audio-effects'; 

function startAudio() { 
    console.log("Start Audio..."); 

    let audioContext = null; 
    if (HasAudioContext) { 
     console.log("Has Audio CTX"); 
     audioContext = new AudioContext(); 
    } 
    else { 
     console.log("No Audio CTX"); 
    } 
}

gulpfile.js

var gulp = require("gulp"); 
var babel = require("gulp-babel"); 

gulp.task("default", function() { 
    return gulp.src("src/app.js") 
    .pipe(babel()) 
    .pipe(gulp.dest("dist")); 
});

来源

2016-08-01 TomSelleck

那么，webpack需要一个babel-loader来读取ES6。你有包括吗？另一种选择，或许更好，可以使用Gulp和Browserify，它还可以让你在浏览器中需要模块。这样你就不需要涉及webpack。 – tomtom

这对我来说是全新的，你有没有得到一个很好的资源如何一起使用gulp/browserify？谢谢回复！ – TomSelleck

https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=webpack%20babel%20tutorial –

我做了一些改动库（我是包的原始作者）。使用npm安装软件包时，您现在可以获得经过转换的ES5代码而不是ES6源代码。你仍然需要webpack，browserify，...来加载模块。

这可能会修复Uncaught SyntaxError: Unexpected token import错误，因此请将您的audio-effects库更新为最新版本。

也应该解决Jorawar Singh回答中提到的错误进口问题。

我还在图书馆工作，所以如果遇到任何问题，请随时在github上创建问题或提出请求。

我个人使用webpack包。这是我的webpack.config.babel.js文件（删除评论）。注意：如果您未将react参数设置为false，我正在使用反应。

import config from 'madewithlove-webpack-config'; 

export default config({ 
    react: true, 
    sourcePath: 'src', // Source directory 
    outputPath: 'builds', // Transpiled coded directory 
});

这从https://github.com/madewithlove/webpack-config/

进口基本的WebPack配置由于我在ES6编写代码，我与巴贝尔transpiling它，我.babelrc文件看起来像这样：

{ 
    "presets": ["es2015", "stage-0"], 
}

通过这些设置，您可以使用webpack-dev-server --inline --hot运行webpack。

您不必使用madewitlove webpack config，但它需要一些标准设置的关怀如编译SCSS等

我希望这给你如何使用audio-effects包或任何其他ES6封装的洞察力。

来源

2016-08-02 10:49:27 Sambego

清楚我的理解有一些与这个库的问题它被写入es6，当你做导入，并想与webpack编译成es5时，webpack也将bummbel所有您需要的模块。这里是我的webpack.config看看喜欢运行

var webpack = require('webpack'); 
var config = { 
    entry: './index.js', 
    output: { 
    path: __dirname + '/dist', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015'] 
     } 
    }] 
    } 
}; 

module.exports = config;

通过的WebPack将编译库和index.js文件到bundle.js

有一些其他的问题，我认为，为了得到这个库，你需要在图书馆做一些小的改变。从

'./Helpers/HasAudioContext'; //this doesn't exist and 
               //webpack will give you compile error

到

'./helpers/hasAudioContext';

我有一个问题whitch我解决不了是我无法运行startAudio功能，但通过index.js我可以（weard让我知道你会发现为什么）在你的索引中。JS

document.getElementById("btn").addEventListener("click", startAudio);

仍存在一些问题，巫婆我想解决，也有一些问题与库巫婆需要解决

来源

2016-08-01 21:16:51

与WebPack使用babel transpiler的麻烦

回答

相关问题