babel7.0 安装及使用

npm init -y 初始化package.json文件

1.全局安装 @babel/cli @babel/core

npm install -g @babel/cli  @babel/core
babel -V //7.5.5 (@babel/core 7.5.5)  即安装成功 mac 需➕sudo

2.接下来在项目中安装 @babel/core @babel/preset-env

npm install --save-dev @babel/core @babel/preset-env

3.安装 @babel/polyfill

npm install --save @babel/polyfill

@babel/core 是babel 核心的包 包括所有核心的api

@babel/cli 是通过命令转换js的工具

@babel/preset-env  指定转换的环境，配置插件，对哪些语法转换

@babel/polyfill  是对babel本身不支持的一些语法转换的 填充

4.创建babel.config.js 配置转换的环境，仅转换环境不支持的部分

5.创建.babelrc文件 配置presets 和plugins 等，

例如要支持decorator和class转换 

需先下载@babel/plugin-proposal-decorators 和@babel/plugin-proposal-class-properties 在更改.babelrc

//.babelrc 文件内代码
{
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", {"loose": true}]
    ]
 }
  

6.运行babel 待转换文件/文件夹 -o  转换后文件

注：还有些插件用于解析js，详见官方文档https://www.babeljs.cn/docs/plugins

TC39 将提案分为以下几个阶段：

• Stage 0 - 设想（Strawman）：只是一个想法，可能有 Babel插件。
• Stage 1 - 建议（Proposal）：这是值得跟进的。
• Stage 2 - 草案（Draft）：初始规范。
• Stage 3 - 候选（Candidate）：完成规范并在浏览器上初步实现。
• Stage 4 - 完成（Finished）：将添加到下一个年度版本发布中。

6.x版本可以npm install --save-dev @babel/preset-stage-2

.babelrc文件内"presets": ["@babel/preset-stage-2"]

7.x版本，所有针对处于标准提案阶段的功能所编写的预设（阶段预设）都已被弃用。不允许上述方式，改完插件方式

{
  "plugins": [
    // Stage 2
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",

    // Stage 3
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    "@babel/plugin-proposal-json-strings"
  ]
}

 

以上为运用babel的最新体验 2019.8.14

babel原理理解。。。待续