npm 包 add-module-exports-webpack-plugin 使用教程

在使用 Webpack 打包 CommonJS 模块时，很容易遇到导出问题。如果将一个模块导出为 CommonJS 规范，那么在使用 ES6 import 语法导入该模块时，Webpack 会将其解析为一个对象，而不是该模块的 default 导出。这个问题可以通过添加一个额外的 module.exports 来解决，但手动编写导出代码会增加工作量并且容易出错。因此，我们可以使用 add-module-exports-webpack-plugin 这个 npm 包来自动为我们生成 module.exports。

安装

首先需要安装该 npm 包：

npm install --save-dev add-module-exports-webpack-plugin

配置

接下来，在 Webpack 的配置文件中进行如下配置：

const AddModuleExportsPlugin = require("add-module-exports-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    new AddModuleExportsPlugin()
  ]
};

现在，Webpack 将自动为每个模块添加 module.exports。

示例代码

假设我们有一个名为 foo.js 的 CommonJS 模块：

// foo.js
class Foo {
  constructor() {
    this.name = "foo";
  }
}

module.exports = Foo;

如果我们直接使用 ES6 的 import 语法导入该模块：

// bar.js
import Foo from "./foo";

const f = new Foo();
console.log(f.name);

那么会导致一个 TypeError: Foo is not a constructor 的错误。这是因为 Webpack 将 foo.js 编译为以下代码：

// foo.js (compiled by Webpack)
class Foo {
  constructor() {
    this.name = "foo";
  }
}

exports.default = Foo;

而 ES6 import 语法将只导入 exports.default，也就是 Foo 类本身，并不包含 module.exports。

使用 add-module-exports-webpack-plugin 可以自动添加 module.exports：

// foo.js
class Foo {
  constructor() {
    this.name = "foo";
  }
}

module.exports = Foo;

// bar.js
import Foo from "./foo";

const f = new Foo();
console.log(f.name);

现在可以正常工作了，输出为 "foo"。

总结

add-module-exports-webpack-plugin 可以帮助我们解决 Webpack 在打包 CommonJS 模块时的导出问题，减少手动编写导出代码的工作量并提高代码的可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/53815