javascript - 前端开发导入

Question

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

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

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

Answer 1

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

• 浏览器
• 网络包
• 汇总

使用 gulp-rollup 构建的示例 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'));
});