手把手搭建一个ES6转译工程

   ES6正式通过已经很久了，但是各大浏览器对于ES6语法的支持到现在还不一致，那我们需要些es6语法怎么办呢？今天就搭建一个es6转译工程，妈妈再也不用担心我写的es6语法不能在浏览器运行啦！

1.前言

一种新的语法从提案到变成正式标准，需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。

• Stage 0 - Strawman（展示阶段）
• Stage 1 - Proposal（征求意见阶段）
• Stage 2 - Draft（草案阶段）
• Stage 3 - Candidate（候选人阶段）
• Stage 4 - Finished（定案阶段）

之前我们可以通过babel-preset-stage-x预设插件来转译，但是随着发展，babel 官方认为，把不稳定的 stage（0-3 作为一种预设是不太合理的，@babel/preset-env、@babel/polyfill等只支持到stage-4级别，因此 babel 新版本废弃了 stage 预设，转而让用户自己选择使用哪个 proposal 特性的插件，这将带来更多的明确性（用户无须理解 stage，自己选的插件，自己便能明确的知道代码中可以使用哪个特性）。

2.方案

基于webpack 3.x:

#babel-loader 7.x 对应 babel-cli 6.x babel-core 6.x;

1.@babel/preset-env + @babel/polyfill （可以转译语法、新 API，但存在污染全局问题）

2.@babel/preset-env + @babel/plugin-transform-runtime + @babel/runtime-corejs2 （可按需导入，转译语法、新 API，且避免全局污染（babel7 中@babel/polyfill 是@babel/runtime-corejs2 的别名），但是检测不到'hello'.includes('h')这种句法）

基于webpack 4.x:

#babel-loader 8.x 对应 @babel/cli 7.x @babel/core 7.x ;

1.@babel/preset-env + core-js + regenerator-runtime 

2.@babel/preset-env + @babel/plugin-transform-runtime + @babel/runtime   ( vue-cli3基础转译部分使用的这种方案 )

3.安装

我选用的webpack4.x 和第一种方法

npm init

在package.json里编写脚本

"scripts": {
    "build": "babel src -d lib -s",
    "start": "webpack-dev-server --hot --config build/webpack.dev.js --progress",
    "build_sit": "webpack --config build/webpack.sit.js"
 }

npm install webpack  webpack-dev-server  webpack-merge --save-dev

npm install webpcak-cli core-js  regenerator-runtime --save

npm install @babel/cli  babel-loader @babel-core @babel/preset-env  --save-dev

npm install clean-webpack-plugin  friendly-errors-webpack-plugin html-webpack-plugin --save-dev

4.搭建一个具有热更新的项目

在目录下建立如此目录结构，如下：

具体配置如下：

.babelrc文件

{
    "presets": [
        [
            "@babel/preset-env", {
                "modules": false,
                "corejs": 3,
                "useBuiltIns": "usage",
                "targets": {
                    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
                }
            }
        ]
    ],
    "plugins": []
}

webpack.base.js

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const FriendlyErrorsWebpackPlugin=require('friendly-errors-webpack-plugin');
 
module.exports = {
    entry: './src/base.js',
    output: {
        path: path.resolve(__dirname,'../dist'),
        filename: 'js/[name]-[hash:8].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    'babel-loader'
                ],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new htmlWebpackPlugin({
            template: './src/view/index.html',
            hash: true
        }),
        new FriendlyErrorsWebpackPlugin()
    ],
    stats:"none"
    /**
    1.errors-only 只在发生错误时输出 
    2.errors-warnings 只在发生错误或有新的编译时输出
    3.minimal  只在发生错误或有新的编译时输出  
    4.none  没有输出
    5.normal  标准输出
    6.verbose  全部输出
    7.detailed  全部输出除了 chunkModules 和 chunkRootModules
    */
}

webpack.dev.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.base')
const path = require('path')
 
module.exports = merge(common, {
    devtool: 'source-map',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        historyApiFallback: true,
        host: 'localhost',  // 一般设置为0.0.0.0 可以供localhost访问和供别人ip访问
        port: 8015,  // 端口
        open: true, // 自动打开浏览器
        compress: true,
        proxy: {
            '/matchName': {
				target: 'http://www.baidu.com',  // 代理目标地址
                pathRewrite: {'^/matchName': '/matchName'}
            }
		}
    }
})

webpack.sit.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.base')
 
module.exports = merge(common, {
    devtool: 'source-map',
    mode: 'development'
})

6.总结

    到此，我们就可以愉快的再js目录下面编写es6代码了！