Requirejs高级应用(一)：将ES6转换为Requirejs代码

既想利用ES6的先进特性，又想发挥Requirejs的AMD特性，于是想着将ES6代码转换为满足Requirejs规范的AMD代码，操作如下。

1. 添加Babel

在Gruntfile中添加grunt-babel支持，如下：

babel: {
    options: {
        sourceMap: false,
        presets: ['babel-preset-es2015'],   // 还可以添加更多特性
        babelrc: true   // 必须启用babelrc文件
    },
    dist: {
        expand: true,
        cwd: 'src/es6/', // ES6文件的存放位置
        src: ['**/*.js'], // 匹配的文件
        dest: 'src/amd' // 输出目录
        ext: '.js', // 输出的后缀名
    }
}

在上面的配置中，启用babelrc文件是关键，可以充分利用babel的所有特性，功能完全超越grunt-babel插件。

2. 添加babelrc文件

在项目下创建.babelrc文件，内容如下：

{
    //  需要安装插件，npm install transform-es2015-modules-amd --save-dev
    "plugins": ["transform-es2015-modules-amd"],  // ES6转AMD的关键
    "presets": ["babel-preset-es2015"]
}

3. 注册任务

在Gruntfile中注册相关任务，如下：

grunt.loadNpmTasks('grunt-babel');
grunt.registerTask('build', ['babel']);

现在运行grunt build，即可得到满足Requirejs规范的AMD代码，示例如下：

define(['exports', './commons/user', 'd3'], function (exports, _user, d3) {
  'use strict';

  Object.defineProperty(exports, "__esModule", {
    value: true
  });

  var _user2 = _interopRequireDefault(_user);
  function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
      default: obj
    };
  }

  exports.default = {
    init: function init() {
      _user2.default.name = 'Gan Huan';
      d3.select('body').append('h1').text(_user2.default.name);
    }
  };
});

4. 去掉ES6的default属性

通过ES6 import语法引入的语句，翻译后会默认带上default属性，在大多数情况下会引发引用错误(多为undefined错误)，如下：

//  ES语法方式引入d3
import d3 from 'd3'
//  调用ES6引入的d3
d3.select('body').append('h1').text(user.name)
//  用babel编译后代码为d3.default.select('body').append('h1').text(user.name)
// 因为d3不存在default属性，这样调用显然会发生错误("Uncaught TypeError: Cannot read property 'select' of undefined")

改进方法如下，将import方式改为requirejs方式

let d3 = require('d3') //这样引入的对象将不会添加default属性

5. 项目实例

更多配置及示例代码，请参见我的项目：yii-es6-amd，请多指点。