使用Babel + grunt与ES6一起工作 - 如何转换require语句？

Question

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

    I=imread('Circle.png');
bw2 = ~im2bw(I, graythresh(I));
bw2=imerode(bw2,SE);
bw2=imerode(bw2,SE);
  L = bwlabel(bw2);

  s = regionprops(L, 'Centroid');
imshow(bw2)

hold on
for k = 1:numel(s)
    c = s(k).Centroid;
    text(c(1), c(2), sprintf('%d', k), ...
        'HorizontalAlignment', 'center', ...
        'VerticalAlignment', 'middle');
end
hold off

  OutputFileName = ['./output_images/'  'circle_erode.png'];
   imwrite(mat2gray(bw2),OutputFileName);   

这就是Gruntfile.js package.json dist/ src/ index.es6 的样子：

index.es6

这些包都在import MapGL from 'react-map-gl'; const data = []; const viewport = new Viewport(); 中定义并安装。

如何将此ES6文件转换为ES5 JavaScript？我能够将它变成一种类型的JavaScript，但它根本不会改变package.json语句。

这是我目前的Gruntfile：

require

运行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。

Answer 1

是的，根据@Matthew Herbst建议，Browserify将处理ES6模块的import绑定。此外，名为babelify的程序包将有助于处理您的babel浏览器转换。

以下似乎效果很好：

使用babel-cli代替babel。

1. 值得注意的是，Babel已被babel-cli替换为babel 6 （有关详细信息，请参阅blog）< / em>的。 所以，首先，从package.json（如果它存在！）中删除/卸载它：

   $ npm uninstall babel --save-dev

   ...并卸载grunt-babel：

   $ npm uninstall grunt-babel --save-dev

2. 安装babel-cli并添加babel preset for all es2015 plugins：

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

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

    {
        "presets": ["es2015"]
    }

grunt-browserify

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

   $ npm install grunt-browserify --save-dev

babelify

1. 安装babelify以处理您的babel浏览器转换：

   $ npm install babelify --save-dev

Gruntfile.js

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

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

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

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

1. 注册您的grunt任务： 您可能还需要更新和更改传递给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'
]);

附加说明：

除了react presets之外，使用es2015 presets 可能可以带来一些好处 - 这需要相应地修改上面的第2,3和7点，但是，我还有＆ ＃39;自己用它。

希望这有帮助！