Babel配置的不完全指南

Babel 7.1.0 升级须知

弃用年份preset

不需要再去手动安装babel-preset-es2015或其他年份，安装@babel/preset-env即可，相当于使用了最新版本的javascript

弃用stage preset

不再使用stage-0等stage配置

@和-的区别

这个其实是npm的相关知识，并不限于babel，安装babel的一些预设有两种方法，一种是直接安装至node_modules文件夹，作为一个单独的npm包：

cnpm install babel-preset-env --save

另一种是安装scoped package?

cnpm install @babel/preset-env --save

两种方法都没有错，但是要注意路径问题，参考创建preset一节

Presets 预设

相当于一个插件集通过提供一系列预设实现转译功能。常用的有：

• @babel/preset-react：用来编译JSX语法
• @babel/preset-env：一个智能的语法环境预设，可以无需详细配置语法转换（如取代了stage-0）

创建preset

选取在babelrc为例，语法如下：

{
    "presets":["@babel/preset-env"]
}

如果你没有采用scoped-package模式，那么你的写法应该是

{
    "presets":["babel-preset-env"]
}

也可以简写为

{
    "presets":["env"]
}

Plugins

插件的运行是在presets之前的，作为一个初级用户目前还没用到插件，基本上使用presets傻瓜式地提供插件集就足够了。详细请戳：Plugins | Babel中文网?

.babelrc文件编写

有多种方式可以配置babel，最方便的是创建一个.babelrc文件，官方说这个文件可以放在任何位置，babel-loader会去递归路径寻找，然而事实上我试了一次好像不行，当然这有可能是我没有处理好。总之，建议放在根目录。

然后你需要安装@babel/core确保所有转译采用你的配置文件进行

实例

一个react项目——

• package.json文件，也就是你大概需要安装的：

{
  ...
    "dependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    ...
    }
    ...
}

• .babelrc文件很简单：

{
  "presets": ["@babel/preset-env","@babel/preset-react"]
}

• webpack.config.js文件：

{
...
module: {
        rules: [
            {
                test: /\.js$/,
                exclude: path.resolve(__dirname,'..','node_modules'),
                use: {
                    loader: "babel-loader",
                }
            },
            ...]
        }
        ...
}