Question

我正在使用npm语法（ES6，imports等）通过exports制作webpack模块。

当我尝试在前端初始化导出类的实例以进行测试时，它无法正常工作，我感觉这与CommonJS导出返回vs {{1}的情况有关} exports。

example.js

ES6

示例-后的WebPack-stuff.js

export default class Example { ....

demo.js

var Example = (function() ....

demo.html

var example = new Example();

我收到以下内容：

错误：未捕获的TypeError：示例不是函数

修改

Webpack配置：

<script src="../example-after-webpack-stuff.js"></script>
<script src="demo.js"></script>

Answer 1

从babel 6开始，export default class Example将被编译为exports.default = Example。在Babel 5中，它将被编译为exports = Example。所以你的代码将使用babel 5运行而不会出错。

在babel 6中，您可以使用CommonJS方式module.exports：

class Example {
  constructor() {
    ...
  }
}

module.exports = Example;

或者您可以使用babel-plugin-add-module-exports来改变babel 6的行为。

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

在webpack.config.js中添加：

loaders: [
  {
    exclude: /(node_modules|bower_components)/,
    loader: 'babel',
    query: {
      presets: ['es2015'],
      plugins: ['add-module-exports']
    }
  }
]

在前端使用ES6 npm模块（webpack）

1 个答案: