CommonJS/ES6-Module auf AMD transpilieren

Question

Wir führen ein Setup durch, bei dem React-Komponenten, die in CommonJS/ES5 auf dem Backend geschrieben sind, auch für das React-Rendering auf dem Server und dem Client im Frontend verfügbar sein müssen.

Ich versuche herauszufinden, wie die React-Komponenten von JSX zu JS sowie von CommonJS zu AMD zu übertragen.

Nun ist es durchaus möglich, dass es keine echte Möglichkeit gibt, von CommonJS zu AMD zu "transpilieren". Also könnten wir es in ES6 schreiben. Wenn wir den React-Komponentencode in ES6 schreiben, wie können wir das dann auf AMD übertragen? Ich habe Probleme, ein Schluckplugin zu finden, das dies tut.

Ich versuchte dies:

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

aber ich glaube, die babel({modules:'AMD'}) Stil alt ist, ich glaube nicht, Babel weiß, was die Module Eigenschaft mehr ist.

Answer 1

Sie können den eigenständigen Modus von Browserify verwenden, um Universal Module Definitions zu erstellen.

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

Dies wird das gebündelte Modul in einem Codeblock wickeln, die es als Commonjs Modul, ein AMD-Modul und ein Rückfall auf eine globale Variable moduleName genannt exportieren.

Wenn Sie Ihre Module auch in ES6 und JSX schreiben möchten, denken Sie daran, die entsprechenden Transformationen einzubeziehen.

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

Answer 2

So wie ich es für den Moment gelöst haben, ist mit diesen Gulp Aufgaben

in meinem Projekt, das wir

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

wir zwei Dinge tun wollen, haben:

1. konvertieren von (es6 und jsx) in (commo njs/plain JS)
2. konvertieren Sie die commonjs reagieren Komponentendateien von oben in AMD und legen Sie sie in den Öffentlichen Ordner so , dass sie für Reagieren Front-End sowie Back-End verwendet werden können.

hier ist das, was im Moment funktioniert:

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); 
     } 

    }); 

}); 

Answer 3

Wenn Sie alle ES6 Module haben, können Sie Babel sagen 6 von AMD zu kompilieren

Zugabe

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

zu, was Babel Config für Presets/Plugins, die Sie bereits haben. Wenn Sie jedoch einige CommonJS-Module haben, sind die anderen Antworten besser.

Answer 4

Babel env preset scheint macht den Job

.babelrc Beispiel

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