Question

如何在webpack react app中使用此repo：https://github.com/chris-rudmin/Recorderjs

我创建了一个新的lib并以es6模块样式导出主文件。

我使用webpack构建，但是当我尝试使用该包时会出现问题。我可以使用：

import Recorder from 'audio-recorder';
var recorder = new Recorder();

但是一旦我尝试编码它然后使用WebWorker，据我所知，这需要是一个js文件的路径。

所以问题分为两部分：

我应该如何设置webpack来处理这样的依赖？
在开发过程中，我如何拥有webpack dev服务器，提供静态文件？

理想情况下，我想为此lib的所有部分创建模块，并在任何项目中轻松使用它。

最后，这个项目的编码器是通过emscripten编译的，我不知道如何在webpack中处理这样的文件。没有webpack触摸它是否可以通过它？

谢谢

Answer 1

为webpack设置依赖项的最简单方法是使用npm - 它支持从github安装。

npm install https://github.com/chris-rudmin/Recorderjs

然后您可以按名称（在package.json中定义）导入模块：

import Recorder from 'opus-recorder';
var recorder = new Recorder();

webpack.config.js应如下所示：

module.exports = {
    entry: "./main.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: "babel" }
        ]
    }
};

不要忘记安装babel-loader以启用ES6模块导入。

使用webpack's documentation设置开发服务器。

您可以告诉webpack不要触摸"external"模块。

Answer 2

你可以使用这个npm模块 - https://www.npmjs.com/package/recorder-js，这是一个es6兼容的包装器，可以通过webpack轻松使用。

如何使用webpack消费它

2 个答案: