Powered by md-Blog  文 - 篇  访客 -

【ES6】Babel 编译 ES6 为 ES5 语法


更新:2020-03-24 16:26:23  /  创建:2020-03-18 11:22:25  /  分类:Webpack  / 
不要删除
参考网址:https://www.babeljs.cn/docs/babel-cli

说明

  • @babel/core Babel 的核心模块。
  • @babel/preset-env Babel 预设器,可根据用户环境自动添加所需的插件,替代并优于 babel-preset-latest 插件。
  • babel-loader BabelWebpack 协同工作模块。
  • @babel/cli Babel 的脚手架。

安装

yarn add @babel/core @babel/preset-env babel-loader -D

配置文件

.babelrc
{
    "presets": [
        "@babel/preset-env"
    ]
}
webpack.common.js
module:{
    rules:[
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true,   // 启用缓存,提高打包速度
                }
            }
        }
    ]
}

测试

js 写入
// es6 test
const add = (a, b) => a + b;
console.log(add)
浏览器 console >

输出以下则编译成功

ƒ add(a, b) {
    return a + b;
}

输出以下则编译失败

(a, b) => a + b
不要删除

小站不易,感谢支持!