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

另一种是安装

cnpm install @babel/preset-env --save

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

Presets 预设

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

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

创建preset

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

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

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

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

也可以简写为

{    "presets":["env"]}

Plugins

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

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