Skip to content

Latest commit

 

History

History
194 lines (132 loc) · 8.51 KB

4.配置Babel6.md

File metadata and controls

194 lines (132 loc) · 8.51 KB

4. 配置Babel6

转载请注明出处 https://brickcarvingartist.github.io/Setting-up-ES6/4.%E9%85%8D%E7%BD%AEBabel6

Babel6较Babel5更具可配置性,但也更难配置。这章提供些小技巧。

4.1 安装Babel6

紧接着的是少量重要的npm包。所有的Babel包都属于Github上的一个仓库。浏览它们的源码和它们的package.json是有指导性的。

  • babel-core:Babel的核心组织和插件基建。你很少需要安装这个包,因为例如babel-cli这样的包把它作为了依赖,意味着它会在它们被安装时自动安装上。
  • babel-cli:Babel的命令行接口。它包含下面的指令:
  • babel-doctor侦测你的Babel安装上的常规问题。
  • babel-external-helpers在控制台上显印Babel的所有帮手方法(比如子类的继承)。
  • babel-register:让你激活Node.js中的Babel代码翻译功能。当你这么做了后,你需求的所有模块(除去你想要忽略的代码,比如通过npm安装的包)会自动被代码翻译。

4.2 配置信息

Babel常用作编译输入文件,比如下面两种情节:

  • 通过命令行工具babel编译一个文件:
babel input-es6.js --out-file output-es5.js
  • 运行一个以ES6输血的Node.js脚本:
babel-node input-es6.js

配置信息是一个集合了很多源文件(它们稍后会被介绍)的JSON数据的对象。两个配置选项会由提供为如何的输出而受很大影响:插件和前置项。这些会稍后阐述。剩下的配置选项都在Babel文档中被阐述。

4.2.1 插件

大致来说,插件是在编译时被应用为输入的方法。插件的两个重要的类型是:

如果你想要编译一些不是基础语法中的部分,你同时需要一个语法插件和一个相对应的转换插件。不管怎样,每个依赖于语法插件的转换插件自动激活那个插件。

插件被通过npm安装。它们的包的名字都加上了前缀babel-plugin-

  • syntax-jsx插件:npm install babel-plugin-syntax-jsx
  • transform-react-jsx插件:npm install babel-plugin-transform-react-jsx

4.2.2 前置项

为了配置你想要的Babel输出,你需要指定它需要用什么样的插件。你可以指定:

  • 个性化插件
  • 前置项,一个支持众多编译情景的插件集合。

下面都是有用的前置项:

  • es2015:编译ES6(如ECMAScript规范中所描述的)至ES5
  • stage-0:编译阶段3的ECMAScript提议至ES5
  • react:编译JSX至JavaScript并移除Flow的类型注释
  • es2015-node5:仅包含那些将Node.js5升级至全面ES6中被需要的插件。因此,较与ES2015前置项来说会少很多代码翻译。特别是生成器不会被代码翻译就在调试时有帮助。

前置项通过npm安装。它们的包的名字都加上了前缀babel-preset-。例如,这是如何安装es2015前置项的方法:

npm install babel-preset-es2015

4.3 配置信息的源文件

这节阐述配置文件可以从哪里来。

4.3.1 首要配置信息源文件:.babelrc

配置信息主要的来源是一个需要被放置到紧靠着你想要编译的输入文件的文件。Babel最先去当前目录看.babelrc最为输入文件,然后去那个目录的父目录,如此以往。.babelrc中的内容被理解成JSON并被用作为Babel的各项配置。比如:

{
	"presets": [
		"es2015"
	]
}

.babelignore文件补充说明.babelrc

它被独立得用在.babelrc中搜寻,却是以同样的形式(通过去输入文件的祖先目录中搜寻)。 它不会代替.babelrc;两个集合会被合并。 .babelignore只能指定ignore配置:它里面的各行会被转成一个数组并被理解为那个配置。

4.3.2 .babelrc的替代品:package.json

每一个npm包都有一个package.json。Babel允许你用那个文件去配置,作为.babelrc的替代品。那么它就必须有一个babel属性(否则Babel会忽略package.json文件)。这个属性的值是有配置信息的对象。举个例子:

{
	"dependencies": {
		···
	},
	"babel": {
		"presets": [
			"es2015"
		]
	}
}

Babel通过去输入文件的祖先目录中以搜索.babelrc的同样方式在package.json中搜寻。如果在同一个目录中同时存在.babelrcpackage.json那么先入文件为主。

4.3.3 混合额外的配置信息

在配置信息中的两个属性指定额外配置信息:

  • env属性用作详细列举环境的名称('development''production'等等)携带更多的配置信息至对象。如果env存在,相对应的当前环境的对象被合并为已经被组装好的配置信息。参见Babel文档获取更多相关环境的信息。
  • extends属性包含了指向一个路径的拥有更多配置信息的一个文件。

4.3.4 次要配置信息的源文件

⚠️谨慎对待次要配置信息

值得注意的是一个次要的配置信息的源文件添加至.babelrc(或package.json),它不会替代它。那意味着你将你的项目化分一个目录,你总是需要包括一个.babelrc。接下来Babel无法在祖先目录中查找并使用一个。这个文件能,打个比方,指定它自己的前置项,它能接入你的构建进程甚至崩掉它(当其中一个前置项不存在时)。

4.3.4.1 babel-node

如果在用babel-node,你能通过命令行指定下面的操作(以及少量其他的):

  • --presets
  • --plugins
  • --ignore:默认的,每个文件的路径下有'node_modules'的部分都不被代码翻译。

下面的指令通过babel-node,并前置es2015-nodereact,以及使transform-async-to-generator插件可用以运行my-script.js

babel-node \
--presets es2015-node5,react \
--plugins transform-async-to-generator \
my-script.js
4.3.4.2 webpack

下面是一个对webpack配置文件webpack.config.js的摘录:

var path = require('path');
···
module.exports = {
	···
	module: {
		loaders: [
			{
				loader: 'babel-loader',
				test: path.resolve(__dirname, 'js'),
				query: {
					presets: ['es2015'],
				},
			}
		]
	},
	···
};

正如你所见,babel-loader支持指定query属性的Babel可选项。

4.4 更多信息


感谢支持译者翻译

支持译者继续翻译


首页:架设ES6

上一章:在浏览器和Node.js上安装Babel

下一章:Babel:配置标准库和助手