使用Babel + grunt与ES6一起工作 - 如何转换require语句？ [英] Using Babel + grunt to work with ES6 - how to transform require statements?

问题描述

我想开始使用ES6，我想用grunt来管理我的文件。这是我迄今为止的项目结构：

I want to start using ES6, and I want to use grunt to manage my files. This is my project structure so far:

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

这是什么 index.es6 看起来像：

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

这些包都定义在 package.json 并安装。

These packages are all defined in package.json and installed.

如何将此ES6文件转换为ES5 JavaScript？对，我可以把它变成一种JavaScript，但它并没有改变 require 语句。

How do I turn this ES6 file into ES5 JavaScript? Right I'm able to turn it into JavaScript of a sort, but it's not transforming the require statements at all.

这是我目前的Gruntfile：

This is my current 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 生成以下文件： / p>

Running grunt produces the following files:

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

但是 myproject.js 包含行 var _reactMapGl = require（'react-map-gl'）; 在浏览器中失败。

But myproject.js contains the line var _reactMapGl = require('react-map-gl'); which fails in the browser.

推荐答案

是的，根据 @Matthew Herbst 建议， Browserify 将处理导入绑定ES6模块。另外，一个名为 babelify 的软件包将有助于处理您的babel browserify转换。

Yes, as per @Matthew Herbst recommendation, Browserify will handle the import bindings for the ES6 modules. Also a package named babelify will help to handle your babel browserify transform.

以下内容似乎很好：

1. 值得注意的是， Babel 已被替换为 babel-cli as of babel 6 （见他们的博客获取更多信息）。
   所以，首先，从你的 package.json （如果存在）中删除/卸载它：

1. It's worth noting that Babel has been replaced with babel-cli as of babel 6 (see their blog for more info on that). So, firstly, remove/uninstall it from your package.json (if it exists!):

$ npm卸载babel --save-dev

...并卸载 grunt-babel ：

$ npm卸载grunt-babel --save-dev

安装 babel-cli ，还包括所有es2015插件的babel预设：

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

接下来，创建一个。babelrc 文件并将其保存在您的项目根目录中，其中包含以下代码：

Next, create a .babelrc file and save it in your projects root directory containing the following code:

    {
        "presets": ["es2015"]
    }

grunt-browserify

grunt-browserify

1. 接下来，安装 grunt-browserify 并保存到您的 package.json ：

$ npm install grunt-browserify --save-dev

babelify

babelify

1. 安装 babelify 来处理您的babel browserify转换：

1. Install babelify to handle your babel browserify transform:

$ npm安装babelify --save-dev

Gruntfile.js

Gruntfile.js

1. 接下来通过删除更新您的 Gruntfile.js 现有的 babel 任务：

1. Next update your Gruntfile.js by deleting the existing babel task:

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

1. ...和添加以下 browserify 任务：

1. ...and adding the following browserify task instead:

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

1. 注册咕噜的任务： / strong>
   很可能您还需要更新并更改传递到 grunt.registerTask 的数组中的任务的顺序。为此：

1. Registering your grunt tasks: It's likely that you will also need to update and change the order of the tasks in the array passed to grunt.registerTask. To this:

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点。但是，我还没有使用它。

Additional note:

There may be some benefits in using react presets in addition to the es2015 presets - which would entail modifying points 2, 3, and 7 above accordingly, however, I haven't used it myself.

希望这有帮助！

这篇关于使用Babel + grunt与ES6一起工作 - 如何转换require语句？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！