使用WebPack的babel transiler时出现问题

Trouble using babel transpiler with WebPack

本文关键字：问题 transiler WebPack babel 使用      更新时间：2023-09-26

我正试图在我的应用程序中使用这个包。

它似乎是用ES6写的，所以我需要一个像babel这样的transpiler。我已经开始了一个新项目，并尝试了以下内容：

  • 创建新的index.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。所以接下来我研究了使用WebPack来允许我使用require。

我进入我的dist文件夹（我的转换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（预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");
    }
}

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

我对库做了一些更改（我是包的原始作者）。当使用npm安装包时，您现在将获得已转换的ES5代码，而不是ES6源代码。你仍然需要webpack，浏览。。。以加载模块。

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

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

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

我个人将该软件包与webpack一起使用。这是我的webpack.config.babel.js文件（删除注释）。注意：如果不将react参数设置为false，我将使用react。

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

这将从中导入基本的webpack配置https://github.com/madewithlove/webpack-config/

由于我在ES6中编写代码，我正在用babel进行传输，我的.babelrc文件如下所示：

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

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

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

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

据我所知，这个库有一些问题，它是在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);

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

相关文章：