如何使用 webpack 使用它

Posted 2023-02-22

【中文标题】如何使用 webpack 使用它

【英文标题】：How to consume this with webpack

【发布时间】：2015-10-14 05:17:20

【问题描述】：

如何在 webpack react 应用程序中使用这个 repo：https://github.com/chris-rudmin/Recorderjs

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

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

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

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

所以问题分为两部分：

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

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

最后，这个项目的编码器是通过 emscripten 编译的，我不确定如何在 webpack 中处理这样的文件。不让webpack接触它是否可以通过？

谢谢

【参考方案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" 模块。

【讨论】：

感谢您的回复。问题是 repo 不使用模块，还有 WebWorkers 的问题。当它使用新的 WebWorker('path/to/script') 时，找不到它。这是我想包装 lib 以便可以通过 npm 使用它的主要原因。

【参考方案2】：

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