基于webpack ，babel 工具将es6语法转化为es5 简单示例 干货分享

代码目录结构：

基本目录结构

### babel 转译es6 -> es5

- 安装babel

- npm install babel-core --save-dev      （用babel 就要用babel的核心包 core是必须要安的）

- npm install babel-loader --save-dev    （loader是基于core的 是用来解析语法的 翻译官）

### babel-preser-es2015

- 让翻译官 loader 拥有解析es6语法的功能 再安装这个插件 loader才具备解析的能力

- npm install babel-preset-es2015 --save-dev

- 模块的解析规则 js 匹配出所有的js 不包括node_modules

- 具体操作 babel转译步骤：

- 1. npm install babel-core --save-dev  npm install babel-loader --save-dev npm install babel-preset-es2015 去安装这三个包 记住顺序

- 2. 在webpack.config.js 中配置 babel的规则 大体规则如下 匹配出所有的js 不包括node_modules里的 进行转译

- 3. 我们还需要再根目录下创建一个 .babelrc 的文件

```

// .babelrc 文件告诉 loader 具备什么样的能力 这么一些 好的 loader你既然知道了es2015 那接下来就全靠你啦！

    {

        "presets": ["es2015"]

    }

```

- 4. 我们在webpack.config.js中 新增了一个 module对象 rules数组  来给babel制定一个规则 不是啥js都转译吧 node_modules里辣么多js 我们只想要我们想要的文件转译  举例 我要转译src 源码文件里的js后缀文件 如下操作：

```

    //webpack.config.js

    let path=require('path');

    module.exports={

        entry:"./src/main.js",

        output:{

            filename:"bundl.js",

            path:path.resolve('./dist)

        },

        module:{

            rules:[

                {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

            ]

        }

    }

```

- 5. 我们进入文件目录下 npm run build 就可以了  值得注意的是 有时候build命令时 会出现报错 类似什么webpack找不到 babel-loader版本问题等 不要慌 根据提示重新 npm install 一下即可。

ps：如果 对于webpack 有点懵逼的 可以看上一篇 虽然很肤浅的使用 但是起码知道了webpack 到底时啥玩意 干了些啥吧 去了解了解。