Babel的使用

最新推荐文章于 2024-06-04 14:14:14 发布

转载最新推荐文章于 2024-06-04 14:14:14 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/longlongdan/p/10614928.html

文章标签：

#javascript #webpack #json #ViewUI

Babel的使用

全局安装$ npm install --global babel-cli
此时执行
发现并没有对代码进行编译
按网上教程，本地安装$ npm i babel-cli babel-preset-es2015 --save-dev
再在文件目录下创建.babelrc文件，配置如下
```
{
	"presets": [
		"es2015"
	],
	"plugins": [
	]
}
```
执行 $ babel a.js -o aCopy.js后，成功转换es6

`babel-register`的使用

下一个常用的运行 Babel 的方法是通过 babel-register。这种方法只需要引入文件就可以运行 Babel，或许能更好地融入你的项目设置。但请注意这种方法并不适合正式产品环境使用。直接部署用此方式编译的代码不是好的做法。在部署之前预先编译会更好。不过用在构建脚本或是其他本地运行的脚本中是非常合适的
nodejs对es6的支持并不好，像class, import这些关键字，react的jsx都无法使用。但是babel可以将这些都转化为es5。
babel-register可以理解成一个小插件，将es6的东西转成es5
本地安装 $ npm i babel-register --save-dev

创建文件test.js，注册babel-register，然后引入文件即可

require('babel-register');
require('./a.js');  //引入需要编译的模块

然后执行node test.js代替node a.js即可

除此之外，它还可以接收一个babel的配置作为参数

require('babel-register')({
    'presets': ['es2015']
});
require('./a.js');  //引入需要编译的模块

Babel的配置文件.babelrc

告诉babel应该怎么做

有两个参数

{
  "presets": [], //预设
  "plugins": [] //插件
}

我们安装babel-preset-es2015和babel-preset-react和babel-preset-stage-x（0~3）和babel-preset-env在预设里面写上
```
{
    "presets": [
        "es2015","react","stage-1","env"
    ],
    "plugins": [
    ]
}
```
plugins插件：常见的transform-runtime,babel-plugin-import
transform-runtime也是一个插件，它与polifill有些类似，polifill用于应用开发中。会添加相应变量到全局，所以会污染全局变量。但它不污染全局变量，所以经常用于框架开发

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

"plugins": [["transform-runtime"],["import", {
      "libraryName": "antd",
      "libraryDirectory": "lib",
      "style": true // `style: true` 会加载 less 文件 或者'css'
    }],["import", {
      "libraryName": "cheui-react",
      "libraryDirectory": "lib/components",
      "camel2DashComponentName": true // default: true
  }]]

babel-preset-stage-x

是4 个不同阶段的（打包的）预设
以上每种预设都依赖于紧随的后期阶段预设。例如，babel-preset-stage-1 依赖 babel-preset-stage-2，后者又依赖 babel-preset-stage-3。.
使用的时候只需要安装你想要的阶段就可以了：$ npm install --save-dev babel-preset-stage-2

babel-preset-env

它的功能类似于 babel-preset-latest，它会根据目标环境选择不支持的新特性来转译。

babel-polyfill的使用

作为对一些babel无法转义的API的补充，例如Array.from(),async await等
安装$ npm install --save babel-polyfill后
- 法3.1: (浏览器环境)单独在html的<head>标签中引入babel-polyfill.js(CDN或本地文件均可)
- 法3.2: 在package.json中添加babel-polyfill依赖, 在webpack配置文件增加入口: 如entry: ["babel-polyfill",'./src/app.js'], polyfill将会被打包进这个入口文件中, 而且是放在文件最开始的地方
- 法3.3: 在package.json中添加babel-polyfill依赖, 在webpack入口文件顶部使用import/require引入,如`import 'babel-polyfill'``