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",
                }
            },
            ...]
        }
        ...
}