将 babel 转译器与 WebPack 一起使用时遇到问题答案

【问题标题】：Trouble using babel transpiler with WebPack将 babel 转译器与 WebPack 一起使用时遇到问题
【发布时间】：2016-12-06 22:13:57
【问题描述】：

我正在尝试在我的应用程序中使用 this 包。

它似乎是用ES6 编写的，所以我需要一个像babel 这样的转译器。我已经开始了一个新项目并尝试了以下方法：

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

尝试使用python -m SimpleHTTPServer 从dist 文件夹运行此程序后，我收到错误：index.js:3 Uncaught ReferenceError: require is not defined。

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

我进入了我的dist 文件夹（我转译的 javascript 所在的位置）并运行：

webpack ./index.js index.js

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

谁能看到我缺少的东西（NPM-ES6-Gulp-WebPack 教程除外）？我似乎陷入了 WebPack-ing 和编译的循环中。

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 (pre-babel / WebPack - 化)

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"));
});

【问题讨论】：

好吧，webpack 需要一个 babel-loader 来读取 ES6。你把它包括在内了吗？另一个可能更好的选择是将 Gulp 与 Browserify 一起使用，它还允许您在浏览器中使用模块。这样你就不需要涉及 webpack。
这对我来说是全新的，你有关于如何一起使用 gulp / browserify 的好资源吗？感谢您的回复！
google.com/…
@Daniel_L 我对谷歌很熟悉，我想他们可能会推荐一个他们个人认为有用的。
有 10 亿个，每个都根据您的确切需求而有所不同...“样板”是一个很好的关键字

标签： javascript node.js gulp ecmascript-6 webpack

【解决方案1】：

我对库进行了一些更改（我是包的原作者）。使用 npm 安装包时，您现在将获得转译的 ES5 代码而不是 ES6 源代码。你仍然需要 webpack、browserify 等来加载模块。

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

Jorawar Singh 的回答中提到的错误导入也应该得到解决。

我仍在开发这个库，所以如果您遇到任何问题，请随时在 github 上创建问题或拉取请求。

我个人使用 webpack 的包。这是我的webpack.config.babel.js 文件（删除 cmets）。注意：我使用的是react，如果你不将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 中编写代码，所以我使用 babel 进行编译，我的 .babelrc 文件如下所示：

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

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

您不必使用madewitlove webpack config，但它会处理一些标准设置，例如编译 scss 等。

我希望这能让您深入了解如何使用 audio-effects 包或任何其他 ES6 包。

【讨论】：

【解决方案2】：

我知道这个库有一些问题，它是用 es6 编写的，当你导入并想用 webpack 编译到 es5 中时，webpack 也会为你提供所有需要的模块。这是我的 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';

我有一个无法解决的问题是我无法运行 startAudio 函数，但通过 index.js 我可以（如果你找到原因，请告诉我）在你的 index.js 中

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

还有一些问题我想解决，图书馆也有一些问题需要解决

【讨论】：