用于前端开发的导入

Question

我想在我的前端开发中使用ES2016的特性。尤其是import和decorators对我来说很有趣。

我已经启动了一个小测试项目，并使用类创建了一些不同的文件，这些文件都包含在import中。Babel生成正确的文件，但包含一个在浏览器中不工作的require语句(据我所知)。

是否有任何好的工具可以将所有文件合并到一个javascript文件中，根据它们的要求进行排序？或者是一些为我而设的图书馆？

Answer 1

因为Babel将您的ES2016代码转换为CommonJS格式，所以您会得到错误，浏览器不支持它。您需要一些模块绑定程序来创建可以在浏览器中使用的包：

• 褐化
• Webpack
• 卷起

使用gulp构建吞咽的示例

// setup by `npm i gulp gulp-rollup rollup-plugin-babel babel-preset-es2016 babel-plugin-external-helpers --save-dev`

// gulpfile.js
var gulp       = require('gulp'),
    rollup     = require('gulp-rollup');

gulp.task('bundle', function() {
  gulp.src('./src/**/*.js')
    // transform the files here.
    .pipe(rollup({
      // any option supported by Rollup can be set here.
      "format": "iife",
      "plugins": [
        require("rollup-plugin-babel")({
          "presets": [["es2016", { "modules": false }]],
          "plugins": ["external-helpers"]
        })
      ],
      entry: './src/main.js'
    }))
    .pipe(gulp.dest('./dist'));
});