ES6转码工具babel7.x的配置

文章概述

本篇文章记录ES6转码工具babel7.x的配置。

babel简介

Babel是一种工具链，主要用于将ECMAScript 2015+代码转换为能够运行在当前或旧版浏览器环境中的向后兼容版本的JavaScript；

必备工具包安装

//核心库
yarn add @babel/core -D   //babel核心库【required】
yarn add @babel/cli -D //babel命令行js转义工具
yarn add @babel/polyfill -S //新API垫片库，如Promise/Arrary.include...; 【required】

//presets预设库
yarn add @babel/preset-env -D //es2015+预设 【required】
yarn add @babel/preset-react -D //JSX和React的预设

//plugins插件库
@babel/runtime -S //【required】
@babel/runtime-corejs2 -S //【required】
@babel/plugin-transform-runtime -D //自动添加引用并去除冗余重复的引用，依赖runtime和corejs【required】

babel7配置

配置到babel.config.js文件

/**
 * babel v7.0.0配置
 * @type {{presets: *[], plugins: *[]}}
 */


// let env = process.env.NODE_ENV;
// env === "production";

//---------------------------------------
// const presets = [ ... ];
// const plugins = [ ... ];

// if (process.env["ENV"] === "prod") {
//     plugins.push(...);
// }

// module.exports = { presets, plugins };
//---------------------------------------

module.exports = {

    //预设作为转义的依赖
    presets: [
        [
            "@babel/preset-env",
            {
                /**
                 * useBuiltIns(配置是否自动引入polyfill)
                 * 1> entry: 全局查找替换引入polyfill的方式(import '@babel/polyfill'->require());
                 * 2> usage: 在需要用到polyfill的引用时，会自动加上,此设置下不可使用import引入polyfill的方式。
                 * 3> false: 不适用；
                 */
                useBuiltIns: 'usage',
                debug: true, //debug模式会在控制台打印出所有插件中的log，已经插件的版本；
                targets: { //指定要支持的最小环运行境的版本(浏览器和node)
                    //查询的方式配置需要兼容浏览器环境
                    browsers: [
                        "last 2 versions",
                        "ie > 8",
                    ],
                    //单独配置需要最小兼容的浏览器环境
                    // "chrome": "41",
                    // "ie": "8",
                    // "edge": "12",
                    // "firefox": "46",
                    // "safari": "10",
                    // "ios": "10",
                    android: "4.0.3",
                    //node环境配置
                    node: "current", //使用当前版本的node,可以直接使用版本号(如：6.10)
                },
                //是否将ES6的模块化语法转译成其他类型
                //可选配置包括："amd"|"umd"|"systemjs"|"commonjs"|false,默认使用"commonjs"。即，将代码中的ES6的import转为require。
                modules: 'commonjs',
                //强制开启某些模块，默认为[]
                // "include": [],
                //禁用某些模块，默认为[]
                // "exclude": [],
            }
        ],
        ["@babel/preset-react"]
    ],

    /**
     * 插件配置
     * 插件指示Babel如何对代码进行转换
     */
    plugins: [
        [
            //自动引入需要的runtime工具库,并自动去除重复引用,需要提前安装需要的工具包；
            "@babel/plugin-transform-runtime",
            {
                //以下是默认配置
                // corejs: false, //通过ES3实现了大部分的ES5、6、7的垫片库；
                // helpers: true, //是否自动引入helper(babel的一些工具函数)
                // regenerator: true, //是否自动引入regenerator(来自facebook用于实现generator functions)
                // useESModules: false
            }
        ]
    ]

    //----------------------------------
    //针对不同环境进行选择性配置，7.0新增
    // overrides: []
};