梦里Babel知多少（二）

Babel-preset-state-x

看 vue-cli 生成的 babel 目录可以看到，在我们想使用一些新特性，且这些新特性并未正式发布时，需要安装 babel-preset-state-x

TC39（ECMA规范的技术委员会）通常会采用5步来发布正式标准。

• babel-preset-state-0 刚有这个idea
• babel-preset-state-1 书面化出了一个提案
• babel-preset-state-2 产生了规范的草案
• babel-preset-state-3 该特性进入候选阶段

需要注意的是，每种预设都依赖后一种预设。
即 babel-preset-state-0 依赖 babel-preset-state-1 。
通常我们会使用 babel-preset-state-2 。

安装：

$ cnpm i babel-preset-state-2 -D

使用：

{
    "presets": [
        ["env": {
            "modules": false,
            "targets": {
                "browser": ["> 1%"]
            },
            "state-2"
        }]
    ]
}

Babel 和 其他工具

安装：

$ cnpm i eslint babel-eslint -D

使用

创建一个 .eslintrc 文件

/* .eslintrc */
{
    "parser": "babel-eslint",   // 这是设置解析器
    "extends": "standard",      // 这是遵循的规则，可以npm i standard -D
    "rules": {
        'arrow-parens': 0      // 这是设置的自定义规则
    }
}

然后在 pageage.json 中进行配置

/* pageage.json */
"scripts": {
   "lint": "eslint --ext .js,.vue public"
 }

执行：

$ npm run lint