首页 文章

将CommonJS / ES6模块映射到AMD

提问于
浏览
1

我们正在运行一个设置,其中在后端的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 回答

  • 0

    您可以使用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 ] ]
    
  • 2

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

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

    任何Babel配置您已有的预设/插件 . 如果您有一些CommonJS模块,其他答案更好 .

  • 0

    我现在解决它的方法是使用这些Gulp任务

    在我的项目中我们有

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

    we want to do two things:

    • 从(es6和jsx)转换为(commonjs / plain JS)

    • 将commonjs react组件文件从上面转换为AMD并将它们放在公共文件夹中,以便它们可以用于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);
            }
    
        });
    
    });
    
  • 2

    Babel env preset似乎完成了这项工作

    .babelrc的例子

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

相关问题