我们正在运行一个设置,其中在后端的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知道模块属性是什么 .
4 回答
您可以使用Browserify的独立模式创建Universal Module Definitions .
这将捆绑的模块包装在一个代码块中,该代码块将其导出为CommonJS模块,AMD模块和后备到名为
moduleName
的全局变量 .如果您也想在ES6和JSX中编写模块,请记住包含适当的变换 .
如果你有所有ES6模块,你可以通过添加告诉Babel 6编译到AMD
任何Babel配置您已有的预设/插件 . 如果您有一些CommonJS模块,其他答案更好 .
我现在解决它的方法是使用这些Gulp任务
在我的项目中我们有
we want to do two things:
从(es6和jsx)转换为(commonjs / plain JS)
将commonjs react组件文件从上面转换为AMD并将它们放在公共文件夹中,以便它们可以用于React前端和后端 .
这是当下有效的方法:
Babel env preset似乎完成了这项工作
.babelrc的例子