复习babel | 易学教程

对babel进行复习😂😂😂

Babel Register

第一：在项目根目录下创建一个 .babelrc 文件，写入以下内容：

{
  "presets": [
  ]
}

第二：安装对应的转码规则：

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

第三：将 .babelrc 文件中修改为以下内容：

{
  "presets": [
    "es2015"
  ]
}

第四步（从第四步开始，前三部必不可少）：

babel-cli：命令行转码
babel-node：babel-cli工具自带一个babel-node命令，提供一个支持ES6的REPL环境
babel-register：实时转码，所以只适合在开发环境使用
babel-core：如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块

babel-cli：

一种使用方式就是全局安装：npm install -g babel-cli（可以通过 npm root -g 查看全局包安装目录），
只要全局安装了 babel-cli，则会在命令行中多出一个命令：babel。

这里如果使用全局安装的 babel-cli 进行转码是没有问题的，但是问题是如果一旦项目给了别人，
别人不知道你使用了这个转码工具，所以解决方式就是将 babel-cli 安装到本地项目中：

npm install --save-dev babel-cli

这种第三方命令行工具如果安装到本地项目，会在 node_modules 中生成一个目录：.bin，
然后第三方命令行工具会将对应的可执行文件放到该目录中。

这样的话，就可以直接在本地项目中使用该第三方命令行工具了。

对于如何使用，则可以通过配置 package.json 文件中的 scripts 字段来配置使用：

{
  "name": "babel-demo",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel demo1.js"
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0"
  }
}

babel-register（适合开发阶段，实时编码转换）:

第一：安装 babel-register

npm install --save-dev babel-register

第二：添加一个傀儡文件(main.js)：

require('babel-register')
require('你的核心功能代码入口文件模块')

第三：使用 node 执行 main.js，而不是你的入口文件.

--save 和 --save-dev

通过 --save 参数安装的包，是将依赖项保存到 package.json 文件中的 dependencies 选项中。
通过 --save-dev 参数安装的包，是将依赖项保存到 package.json 文件中的 devDependencies 选项中。

无论是 --save 或者 --save-dev 安装的包，通过执行 npm install 都会将对应的依赖包安装进来。

但是，在开发阶段会有一些仅仅用来辅助开发的一些第三方包或是工具，然后最终上线运行（到了生产环境），
这些开发依赖项就不再需要了，就可以通过 npm install --production 命令仅仅安装 dependencies 中的
依赖项

来源：https://www.cnblogs.com/ygjzs/p/12230935.html

标签

babel

转码

dev

install