進口前端開發

Question

我想在我的前端開發中使用ES2016的功能。特別是import和decorators對我來說很有意思。

我已經開始了一個小測試項目，並創建了一些包含import的類的不同文件。 Babel生成正確的文件，但包含一個require聲明，該聲明在瀏覽器中不起作用（據我所知）。

是否有任何好的工具可以將所有文件連接成按他們的要求排序的單個JavaScript文件？或者一些圖書館爲我做這些？

Answer 1

由於Babel將您的ES2016代碼轉換爲CommonJS格式，因此瀏覽器不支持它。您需要創建捆綁一些模塊捆綁，可以在瀏覽器中使用：

• Browserify
• 的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')); 
});