Babel的使用

时间 2019-11-20

标签 babel 使用繁體版

原文原文链接

Babel的使用javascript

全局安装$ 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的配置文件.babelrccss

告诉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-xhtml

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

babel-preset-envnode

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

babel-polyfill的使用react

做为对一些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'``

Babel的使用

babel-register的使用

`babel-register`的使用