导入前端开发

Question

我想使用ES2016的特性来进行我的前端开发。特别是 import 和 decorators 对我来说很有趣。

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

是否有任何好的工具可以将所有文件合并到一个 javascript 按要求排序的文件中？或者 gulp 的一些图书馆为我做这件事？

Answer 1

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

浏览器化
Webpack
汇总

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

导入前端开发

import for front end development

javascript

gulp

babeljs

ecmascript-2016