Question

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

似乎是用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文件夹（我编译的javascript文件夹）并运行：

webpack ./index.js index.js

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

有人可以看到我遗漏的内容（除NPM-ES6-Gulp-WebPack教程外）吗？我似乎陷入了WebPacking和转换的循环中。

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

Answer 1

我对库进行了一些更改（我是该软件包的原始作者）。使用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中编写代码，我正在使用babel进行编译，我的.babelrc文件看起来像这样：

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

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

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

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

Answer 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);

还有一些我想要解决的问题，还有一些问题需要解决库

麻烦使用带有WebPack的babel转换器

2 个答案: