我使用babel的时候需要js吗？
我正在试验ES6，而我使用gulpbuild立和babel来转录到ES5。 输出不在节点中运行，只是从具有标记的.htm文件链接而来。 我想我需要补充
<script src='require.js'></script> 或类似的东西。
我试图导入/导出。
////////////////scripts.js import {Circle} from 'shapes'; c = new Circle(4); console.log(c.area()); /////////////////shapes.js export class Circle { circle(radius) { this.radius = radius; } area() { return this.radius * this.radius * Math.PI; } }
错误是
Uncaught ReferenceError: require is not defined
指这个（在pipe（babel（））之后）
var _shapes = require('shapes');
我使用babel的时候需要js吗？
您可能需要一些模块加载器，但不需要RequireJS。 你有几个select。 以下内容将帮助您开始使用。
rollup.js与rollup-plugin-babel
Rollup是下一代JavaScript模块打包程序。 它本地理解ES2015模块，并将生成一个不需要任何模块加载器来运行的软件包。 未使用的输出将从输出中删除，这就是所谓的“抖动”。
现在我个人推荐使用rollupjs，因为它产生最清晰的输出，而且易于设置，但是它给出了答案的不同方面。 所有其他方法做以下几点：
- 用babel编译ES6代码，使用你select的模块格式
- 将编译后的模块和模块加载器连接起来，或者使用一个将会遍历你的依赖关系的打包器。
rollupjs事情并不真的这样工作。 在这里，总结是第一步，而不是巴贝尔。 它只默认了解ES6模块。 您必须提供一个将依赖关系将被遍历和连接的入口模块。 由于ES6允许在模块中使用多个命名导出，因此rollupjs非常聪明，可以去除未使用的导出，从而缩小了包的大小。 不幸的是，rollupjs-sparsing器不理解> ES6语法，所以在汇总分析之前，ES7模块必须被编译，但编译不应该影响ES6的导入。 这是通过使用rollup-plugin-babel插件和babel-preset-es2015-rollup预设完成的（除了模块转换器和external-helpers插件外，此预置与es2015一样）。 因此，如果正确设置，汇总将在模块中执行以下操作：
- 从文件系统读取您的ES6-7模块
- babel插件将其编译到内存中的ES6
- 汇总分析ES6代码的导入和导出（使用橡子parsing器，编译成汇总）
- 它遍历整个graphics，并创build一个单一的包（它仍然可能有外部依赖关系，并且条目的导出可能会以您select的格式导出）
示例nodejs构build：
// setup by `npm i rollup rollup-plugin-babel babel-preset-es2015 babel-plugin-external-helpers --save-dev` // build.js: require("rollup").rollup({ entry: "./src/main.js", plugins: [ require("rollup-plugin-babel")({ "presets": [["es2015", { "modules": false }]], "plugins": ["external-helpers"] }) ] }).then(bundle => { var result = bundle.generate({ // output format - 'amd', 'cjs', 'es6', 'iife', 'umd' format: 'iife' }); require("fs").writeFileSync("./dist/bundle.js", result.code); // sourceMaps are supported too! }).then(null, err => console.error(err));
grunt-rollup示例grunt构build
// setup by `npm i grunt grunt-rollup rollup-plugin-babel babel-preset-es2015 babel-plugin-external-helpers --save-dev` // gruntfile.js module.exports = function(grunt) { grunt.loadNpmTasks("grunt-rollup"); grunt.initConfig({ "rollup": { "options": { "format": "iife", "plugins": [ require("rollup-plugin-babel")({ "presets": [["es2015", { "modules": false }]], "plugins": ["external-helpers"] }) ] }, "dist": { "files": { "./dist/bundle.js": ["./src/main.js"] } } } }); }
示例gulp构build与gulp-rollup
// setup by `npm i gulp gulp-rollup rollup-plugin-babel babel-preset-es2015 babel-plugin-external-helpers --save-dev` // gulpfile.js var gulp = require('gulp'), rollup = require('gulp-rollup'); gulp.task('bundle', function() { gulp.src('./src/**/*.js') // transform the files here. .pipe(rollup({ // any option supported by Rollup can be set here. "format": "iife", "plugins": [ require("rollup-plugin-babel")({ "presets": [["es2015", { "modules": false }]], "plugins": ["external-helpers"] }) ], entry: './src/main.js' })) .pipe(gulp.dest('./dist')); });
Babelify + Browserify
Babel有一个叫babelify的整洁包裹。 它的使用非常简单明了：
$ npm install --save-dev babelify babel-preset-es2015 babel-preset-react $ npm install -g browserify $ browserify src/script.js -o bundle.js \ -t [ babelify --presets [ es2015 react ] ]
或者你可以从node.js中使用它：
$ npm install --save-dev browserify babelify babel-preset-es2015 babel-preset-react ... var fs = require("fs"); var browserify = require("browserify"); browserify(["./src/script.js"]) .transform("babelify", {presets: ["es2015", "react"]}) .bundle() .pipe(fs.createWriteStream("bundle.js"));
这将一次性传输和连接您的代码。 Browserify的.bundle将包含一个漂亮的CommonJS加载器，并将您的转换模块组织到函数中。 你甚至可以有相对的import。
例：
// project structure . +-- src/ | +-- library/ | | \-- ModuleA.js | +-- config.js | \-- script.js +-- dist/ \-- build.js ... // build.js var fs = require("fs"); var browserify = require("browserify"); browserify(["./src/script.js"]) .transform("babelify", {presets: ["es2015", "react"]}) .bundle() .pipe(fs.createWriteStream("dist/bundle.js")); // config.js export default "Some config"; // ModuleA.js import config from '../config'; export default "Some nice export: " + config; // script.js import ModuleA from './library/ModuleA'; console.log(ModuleA);
编译只是在你的项目根目录下运行node build.js 。
Babel + WebPack
用babel编译所有的代码。 我build议你使用amd模块转换器（在babel 6中称为babel-plugin-transform-es2015-modules-amd ）。 之后，将编译后的源代码与WebPack捆绑在一起。
WebPack 2已经出来！ 它了解原生ES6模块， 并将执行（或者说模拟）使用babili -内置的死代码消除树抖动 。 现在（2016年9月）我仍然build议使用汇总与巴贝尔，虽然我的意见可能会改变与WebPack 2的第一个版本。随意在评论中讨论你的意见。
自定义编译pipe道
有时候你想对编译过程有更多的控制权。 你可以像这样实现你自己的pipe道：
首先，你必须configurationbabel来使用amd模块。 默认情况下，babel会转换到CommonJS模块，尽pipe浏览器能够很好地处理这些模块，但在浏览器中处理起来有些复杂。
- Babel 5：使用
{ modules: 'amdStrict', ... }选项 - Babel 6：使用
es2015-modules-amd插件
不要忘记打开moduleIds: true选项。
检查生成的模块名称的编译代码，定义模块和所需模块之间经常存在不匹配。 请参阅sourceRoot和moduleRoot 。
最后，你必须有某种模块加载器，但它并不是requirejs所必需的。 有杏仁酱 ，一个微小的需要垫片效果很好。 你甚至可以实现你自己的：
var __modules = new Map(); function define(name, deps, factory) { __modules.set(name, { n: name, d: deps, e: null, f: factory }); } function require(name) { const module = __modules.get(name); if (!module.e) { module.e = {}; module.f.apply(null, module.d.map(req)); } return module.e; function req(name) { return name === 'exports' ? module.e : require(name); } }
最后，你可以将loader shim和编译好的模块连接在一起，然后运行uglify。
Babel的样板代码在每个模块中都是重复的
默认情况下，大多数上述方法都是用babel单独编译每个模块，然后将它们连接在一起。 这也是babelify。 但是，如果你看看编译后的代码，你会发现babel在每个文件的开头都插入了大量的样板文件，其中大部分文件都是重复的。
为了防止这个，你可以使用babel-plugin-transform-runtime插件。
准系统webpack 2
1）如果这是你的根目录：
的index.html
<html> ... <script src="./bundle.js"></script> ... </html>
scripts.js中
import { Circle } from './shapes.js'; ...
shapes.js
export class Circle { ... }
2）有节点安装节点
3）在terminal中运行以下命令：
$ npm install -g webpack
5）在你的根目录下运行以下命令：
$ webpack scripts.js bundle.js
现在你的根目录下应该有一个叫做bundle.js的文件，这个文件就是你的index.html文件所要使用的文件。 这是一个来自webpack的简约捆绑function。 你可以在这里了解更多
require在浏览器中不存在，所以这个错误是预料之中的。 你需要使用诸如require.js或Browserify之类的东西。
