前端开发的导入

Question

我想使用 ES2016 的功能进行前端开发。尤其是import 和decorators 对我来说很有趣。

我已经开始了一个小型测试项目，并创建了一些不同的文件，其中包含我在import 中包含的类。 Babel 生成正确的文件，但包含一个 require 语句，该语句在浏览器中不起作用（据我所知）。

是否有任何好的工具可以将所有文件合并成一个按其要求排序的单个 javascript 文件？或者一些为我做这件事的 gulp 库？

Answer 1

您收到错误是因为 Babel 将您的 ES2016 代码转换为 CommonJS 格式，浏览器不支持它。你需要一些模块打包器来创建可以在浏览器中使用的包：

• 浏览器
• 网页包
• 汇总

示例gulp 使用gulp-rollup 构建

// 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'));
});