将CommonJS / ES6模块映射到AMD

Question

我们正在运行一个设置，其中在后端的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知道模块属性是什么。

Answer 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 ] ]

Answer 2

如果您拥有所有ES6模块，您可以通过添加

告诉Babel 6编译为AMD

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

到您已有的预设/插件的Babel配置。如果您有一些CommonJS模块，其他答案更好。

Answer 3

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

在我的项目中我们有

EXTRA_OECONF = "--enable-cups"

我们想做两件事：

1. 从（es6和jsx）转换为（commonjs / plain JS）
2. 将commonjs react组件文件从上面转换为AMD，并将它们放在公共文件夹中 他们可以用于React前端和后端。

这是目前有效的方法：

+DEPENDS += " cups "

Answer 4

Babel env preset似乎完成了工作

.babelrc示例

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