web-dev-qa-db-ja.com

ES6での作業にBabel + gruntを使用する-requireステートメントを変換する方法は？

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');という行が含まれています。

javascriptgruntjsecmascript-6babel
10
Richard

はい、 @ Matthew Herbst の推奨事項に従って、 Browserify はES6モジュールのimportバインディングを処理します。また、 babelify という名前のパッケージは、babel browserify変換の処理に役立ちます。

以下はうまくいくようです：

babelの代わりにbabel-cliを使用してください。

  1. Babel が babel-cli に置き換えられたことは注目に値します6（詳細は blog を参照）それに関する情報）。したがって、まず、それを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

  1. 次に grunt-browserify をインストールしてpackage.jsonに保存します。

    $ npm install grunt-browserify --save-dev

babelify

  1. インストール babelify を使用して、babel browserify変換を処理します。

    $ npm install babelify --save-dev

Gruntfile.js

  1. 次に、既存のbabelタスクを削除してGruntfile.jsを更新します。
    // DELETE the following...
    babel: {
        files: {
            expand: true,
            src: ['src/*.es6'],
            ext: '-compiled.js'
        },
        options: {
            sourceMap: true,
            presets: ['babel-preset-es2015']
        }
    },
  1. ...そしてadding代わりに次の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.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プリセット に加えて reactプリセット を使用するといくつかの利点がありますかもしれませんこれはポイント2、3の変更を伴います、およびそれに応じて上記の7、しかし、私はそれを自分で使用していません。

お役に立てれば！

24
RobC