Javascript 在前端使用ES6 npm模块（网页包）

我正在通过

webpack

使用

ES6

语法（

imports

，

exports

等）制作

npm

模块

当我尝试在前端初始化导出类的实例以进行测试时，它不起作用，我感觉这与

CommonJS

exports返回的内容与

ES6

exports有关

example.js

export default class Example { ....

var Example = (function() ....

var example = new Example();

webpack stuff.js之后的示例

export default class Example { ....

var Example = (function() ....

var example = new Example();

demo.js

export default class Example { ....

var Example = (function() ....

var example = new Example();

demo.html

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

---

自babel 6以来，

导出默认类示例

将编译为

exports.default=Example

。在Babel 5中，它将被编译为

exports=Example

。因此，您的代码将使用Babel5无误地运行

在babel 6中，您可以使用CommonJS way

模块。导出

：

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

module.exports = Example;

或者您可以使用

babel插件添加模块导出

更改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']
    }
  }
]

---

它不会那样工作的。你必须捆绑整个东西，并在脚本标记中使用单个js文件。@kabirbaidhya怎么做？例如，webpack是npm模块，demo.js是一个自定义文件，用户可以自行创建。好的，您在ES6中编写的所有相互依赖的文件都需要使用webpack/browserify绑定，以生成一个bundle.js或类似文件。这个文件就是你在标签中使用的。好的，检查一下这个例子。我已经在这里完成了：@Felix我已经将

library

选项设置为

Example

并将

libraryTarget

设置为

var

，但它仍然无法工作

var Example=（函数（）..

是在编译文件的开头吗？那么我不知道问题出在哪里。当然，对于一个不完整的示例，我们无能为力。请发布所有相关的代码/配置。“我已经将

库

选项设置为

示例

”你为什么不从一开始就这么说呢？插件正是我想要的。谢谢你！（可惜他们在《巴别塔6:s》中这么做了）