Преобразование модулей CommonJS/ES6 в AMD

Question

Мы запускаем установку, в которой компоненты React, написанные в CommonJS/ES5 на бэкэнд, должны быть доступны на интерфейсе также для рендеринга React на сервере и на клиенте.

Я пытаюсь выяснить, как перекрыть компоненты React от JSX к JS, а также от CommonJS до AMD.

Теперь вполне возможно, что нет реального способа «перевести» с CommonJS на AMD. Поэтому мы могли бы написать его в ES6. Если мы напишем код компонента React в ES6, как мы можем перевести это в AMD? У меня возникли проблемы с поиском плагина-глотка, который делает это.

Я попытался это:

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

, но я считаю, что babel({modules:'AMD'}) стиль стар, я не думаю, что Бабель знает, что такое свойство модулей больше.

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

Так я решил его на данный момент с этими глотком задач

в моем проекте мы имеем

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

мы хотим сделать две вещи:

1. конвертировать из (es6 и jsx) в (commo njs/plain JS)
2. конвертировать файлы с компонентами commonjs из AMD в 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); 
     } 

    }); 

}); 

Answer 3

Если у вас есть все модули ES6, вы можете сказать Бабеля 6 составить ВМД, добавив

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

в любой Babel конфигурации для предустановок/плагинов, которые у вас уже есть. Если у вас есть модули CommonJS, другие ответы лучше.

Answer 4

Babel env preset кажется делает работу

.babelrc например

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