将 CommonJS/ES6 模块转换为 AMD答案

【问题标题】：Transpiling CommonJS/ES6 modules to AMD将 CommonJS/ES6 模块转换为 AMD
【发布时间】：2016-03-31 05:47:13
【问题描述】：

我们正在运行一个设置，其中后端用 CommonJS/ES5 编写的 React 组件需要在前端可用，以便在服务器和客户端上进行 React 渲染。

我正在尝试弄清楚如何将 React 组件从 JSX 转换为 JS 以及从 CommonJS 转换为 AMD。

现在，很可能没有真正的方法可以从 CommonJS“转换”到 AMD。所以我们可以用 ES6 编写它。如果我们在 ES6 中编写 React 组件代码，我们如何将其转换为 AMD？我无法找到执行此操作的 gulp 插件。

我试过了：

http://www.sitepoint.com/transpiling-es6-modules-to-amd-commonjs-using-babel-gulp/

但我认为 babel({modules:'AMD'}) 样式已经过时了，我认为 Babel 不再知道 modules 属性是什么了。

【问题讨论】：

您有现有的 AMD 系统还是刚起步？只要您设置了正确的工具，CommonJS 也可以在客户端工作。现在 AMD 不太常见了。
谢谢，是的，我在 AMD 方面有更多经验，对我来说工作得很好，Browserify 看起来就像一场噩梦，无论如何都被 Webpack 取代，所以坚持下去
@loganfsmyth browserify 不支持热重载，但 requirejs 使它变得容易 => medium.com/@the1mills/…
是的，使用任何有效的工具，我只是通常会尝试提及 AMD 不是唯一的选择。

标签： reactjs gulp ecmascript-6 babeljs amd

【解决方案1】：

您可以使用 Browserify 的独立模式创建Universal Module Definitions。

browserify module-name.js -o bundle.js --standalone moduleName

这会将捆绑的模块包装在一个代码块中，该代码块会将其导出为一个 CommonJS 模块、一个 AMD 模块和一个名为 moduleName 的全局变量的回退。

如果您也想在 ES6 和 JSX 中编写模块，请记住包含适当的转换。

browserify module-name.js -o bundle.js --standalone moduleName -t [ babelify --presets [ es2015 react ] ]

【讨论】：

没关系。您不必对所有代码都使用 Browserify。只需将它用于您要编译为 UMD 的模块，以便您可以将它们与 RequireJS 一起使用。

【解决方案2】：

如果你有所有的 ES6 模块，你可以通过添加告诉 Babel 6 编译到 AMD

plugins: [
  "babel-plugin-transform-es2015-modules-amd"
}

到你已经拥有的预设/插件的任何 Babel 配置。如果你有一些 CommonJS 模块，其他答案会更好。

【讨论】：

是的，不幸的是，当模块是 CommonJS 而不是 ES6 时，这似乎很糟糕，所以只要确保如果你使用这个，你使用的所有模块语法都是 ES6，而不是 CJS。
啊抱歉，完全正确，我忘了你说过这是两者的结合。

【解决方案3】：

我目前解决它的方法是使用这些 Gulp 任务

在我的项目中我们有

//root
  /lib-es5
  /lib-es6
  /public/js/react-components

我们想做两件事：

从 (es6 和 jsx) 转换为 (commonjs/plain JS)
把上面的commonjs react组件文件转换成AMD放到public文件夹里面它们可以用于 React 前端和后端。

这是目前有效的方法：

 gulp.task('transpile-lib', [ ], function () {
    return gulp.src(['server/lib-es6/**/*.js'])
        .pipe(babel({
            presets: ['react']
        }))
        .pipe(gulp.dest('server/lib-es5'));
 });


gulp.task('convert', ['transpile-lib'], function (cb) {   //convert commonjs to amd

    cp.exec('r.js -convert server/lib-es5/react-components server/public/js/react-components', function (err, stdout, stderr) {
        if (err) {
            cb(err)
        }
        else if (err = (String(stdout).match(/error/i) || String(stderr).match(/error/i))) {
            console.error(stdout + stderr);
            cb(err);
        }
        else {
            cb(null);
        }

    });

});

【讨论】：

【解决方案4】：

Babel env preset 似乎可以胜任

.babelrc 示例

{
    "presets": [
        ["env", {
          "modules": "amd"
        }]
      ]
}

【讨论】：