使用Babel + grunt與ES6一起工作 - 如何轉換require語句？

Question

我想開始使用ES6，我想使用grunt來管理我的文件。 到目前為止，這是我的項目結構：

Gruntfile.js
package.json
dist/
src/
  index.es6

這就是index.es6樣子：

import MapGL from 'react-map-gl';
const data = [];
const viewport = new Viewport();

這些包都在package.json定義並安裝。

如何將此ES6文件轉換為ES5 JavaScript？ 我能夠將它變成一種類型的JavaScript，但它根本不會改變require語句。

這是我目前的Gruntfile：

module.exports = function(grunt) {
  require('load-grunt-tasks')(grunt);
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    jshint: {
      files: ['src/index.js', 'test/index.js'],
      options: {
        reporterOutput: '',
        esnext: true,
        globals: {
          console: true,
          module: true,
          document: true
        }
      }
    },
    babel: {
        files: {
            expand: true,
            src: ['src/*.es6'],
            ext: '-compiled.js'
        },
        options: {
            sourceMap: true,
            presets: ['babel-preset-es2015']
        }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['babel', 'jshint', 'concat']
    }
  });
  grunt.registerTask('default', ['babel', 'jshint', 'concat', 'uglify']);
};

運行grunt會生成以下文件：

Gruntfile.js
package.json
dist/
  myproject.js
src/
  index.es6
  index-compiled.js
  index-compiled.map

但myproject.js包含行var _reactMapGl = require('react-map-gl'); 在瀏覽器中失敗。

Answer 1

是的，根據@Matthew Herbst的建議， Browserify將處理ES6模塊的import綁定。 另外一個名為babelify的軟件包將有助於處理您的babel瀏覽器轉換。

以下似乎運作良好：

使用babel-cli而不是babel 。

1. 值得注意的是， Babel已經被babel-cli取代為babel 6 （有關更多信息，請參閱他們的博客 ） 。 所以，首先，從package.json刪除/卸載它（如果它存在！）：

   $ npm uninstall babel --save-dev

   ...並卸載grunt-babel ：

   $ npm uninstall grunt-babel --save-dev

2. 安裝babel-cli並包括所有es2015插件的babel預設 ：

   $ npm install --save-dev babel-cli babel-preset-es2015

3. 接下來，創建一個.babelrc文件並將其保存在包含以下代碼的項目根目錄中：

    {
        "presets": ["es2015"]
    }

grunt-browserify

4. 接下來，安裝grunt-browserify並將其保存到package.json ：

   $ npm install grunt-browserify --save-dev

babelify

5. 安裝babelify來處理你的babel browserify轉換：

   $ npm install babelify --save-dev

Gruntfile.js

6. 接下來通過刪除現有的babel任務來更新您的Gruntfile.js ：

    // DELETE the following...
    babel: {
        files: {
            expand: true,
            src: ['src/*.es6'],
            ext: '-compiled.js'
        },
        options: {
            sourceMap: true,
            presets: ['babel-preset-es2015']
        }
    },

7. ...並添加以下browserify任務：

    browserify: {
        dist: {
            files: {
                // destination for transpiled js : source js
                'dist/myproject.js': 'src/index.es6'
            },
            options: {
                transform: [['babelify', { presets: "es2015" }]],
                browserifyOptions: {
                    debug: true
                }
            }
        }
    }

8. 注冊你的grunt任務：你可能還需要更新和更改傳遞給grunt.registerTask的數組中的任務grunt.registerTask 。 對此：

grunt.registerTask('default', [
    'jshint',
    //'concat', <-- Probably don't need to concat the files, assuming index.es6 imports the necessary modules.
    'browserify:dist',
    'uglify'
]);

附加說明：

除了es2015預設之外，使用反應預設 可能會有一些好處 - 這需要相應地修改上面的第2,3和7點，但是，我自己沒有使用它。

希望這可以幫助！