webpack(3)_编译ES6

寇坚成
2023-12-01

使用babel编译ES6语法

javascript的ES2015[es6]规范出来以后,许多浏览器都开始支持ES6语法,但是很多低版本浏览器还不兼容,甚至一些高版本浏览器也不是完全支持ES6语法,所以需要使用Babe来将ES6代码转为ES5代码,从而在能够在浏览器上运行。
babeljs官网:https://babeljs.cn/

babel安装

  • 初始化工程
    1、创建工程空目录Test
    2、进入Test目录
    3、使用npm初始化工程 npm init
    4、创建webpack.config.js文件
  • 安装babel-loader(可以编译ES6基本语法)
    npm install babel-loader@version --save-dev
  • 安装babel-core
    npm install babel-core@version --save-dev
  • 安装babel-preset-env
    npm install babel-preset-env --save-dev
  • 配置webpack.config.js
module.exports = {
    entry: {
        app: './app.js' // 文件入口可以有多个,在多页或者不同类型组件的情况下可能有多个入口
    },
    output: {
        filename: './output/[name].[hash:5].js' // name指打包的js的名称,如app,hash:5表示用5位不同的hash值
    },
    module: {
        rules: [
            {
                test: /\.js$/, // 定义规则
                use: {
                    loader: "babel-loader", // 使用babel-loader来执行
                    options: {
                        presets: [ // 预置运行环境
                            ["env", {
                                targets: {
                                    browsers: ['> 1%', 'last 2 versions']
                                }
                            }]
                        ]
                    }
                },
                exclude: '/node_modules/' // 规则之外的文件不做这个操作
            }
        ]
    }
}
  • 安装babel-polyfill(全局垫片,引入后就可在全局范围内使用,为开发应用准备,可解析ES6方法,构造函数等)
    npm install bable-polyfill --save
    并且在main.js或者全局js文件中引入:
    import 'babel-polyfill'
    使用polyfill打包后会在全局环境下实现ES6中的函数方法,ES5中不存在的方法会自动创建。
  • Babel Runtime Transform(局部垫片)
    新建文件.babelrc文件,此文件是babel的配置文件。
    安装npm install plugin-transform-runtime --save-dev
    配置.babelrc文件

    {
    "presets":[ // 预置运行环境
        ["env", {
            "targets": {
                "browsers": ["> 1%", "last 2 versions"]
            }
        }]
    ],
    "plugins": ["transform-runtime"]
    }
    • 最后一步运行webpack.config.js
      使用webpack命令打包
 类似资料: