接续上篇 ES6 + 转 ES5, 本篇将使用 webpack 和 babel 将多个不同目录下指定的多个 ES6 + 语法的 JS 文件编译为 ES5, 并将编译后的文件配置注入对应的 html 文件.
所需环境 node,NPM, 设置淘宝镜像请参考上篇进行安装, 地址: https://www.cnblogs.com/puyongsong/p/12036090.html
一, 新建项目, 目录如下
二, 执行命令初始化项目
cnpm init -y
执行成功后会生成文件: package.JSON
三, 执行命令安装 webpack
cnpm install webpack --save-dev
(有个坑)在 webpack3 中, webpack 本身和它的 CLI 以前都是在同一个包中, 但在第 4 版中, 两者已分开管理, 所以要单独安装其脚手架.
执行命令安装 webpack-cli
cnpm install webpack-cli --save-dev
四, 执行命令安装以下 3 个用于处理 JS 的包
cnpm install --save-dev babel-loader @babel/core @babel/preset-env
babel-loader: 对使用了 ES2015 + 语法的. JS 文件进行处理.
babel-core: 提供一系列 API. 当 webpack 使用 babel-loader 处理文件时, babel-loader 就调用了 babel-core 的 API.
babel-preset-env: 告诉 babel 使用哪种转码规则进行文件处理. babel 有几种规则都可以实现对 ES6 语法的转码, 如 babel-preset-es2015,babel-preset-latest,babel-preset-env, 不过官方现已建议采用 babel-preset-env.
五, 执行命令安装全局垫片插件:
cnpm install babel-polyfill --save-dev
六, 执行命令安装局部垫片插件:
- cnpm install @babel/runtime --save-dev
- cnpm install @babel/plugin-transform-runtime --save-dev
垫片: Babel 默认只转换新的 JavaScript 句法 (syntax), 而不转换新的 API, 比如 Iterator,Generator,Set,Maps,Proxy,Reflect,Symbol,Promise 等全局对象, 以及一些定义在全局对象上的方法(比如 Object.assign) 都不会转码. 举例来说, ES6 在 Array 对象上新增了 Array.from 方法. Babel 就不会转码这个方法. 如果想让这个方法运行, 必须使用 babel-polyfill, 为当前环境提供一个垫片.
七, 根目录下新建文件: webpack.config.JS
这个 JS 配置文件的注意事项我都写上了注释, 后面我会将其全部内容贴上来.
八, 根目录下建一个. babelrc 文件, 内容为
- {
- "presets": [
- ["@babel/preset-env", {
- "targets": {
- "browsers": ["> 1%", "last 2 versions"]
- }
- }]
- ],
- "plugins": ["@babel/transform-runtime"]
- }
意思是打包后的代码要支持 1% 以上的浏览器并支持浏览器的上 2 个版本
此时执行命令 webpack 就可以了
九, 想要配置为 HTML 文件自动注入所以生成的包还需要安装以下插件
执行命令安装 HTML-webpack-plugin 插件
cnpm install HTML-webpack-plugin --save-dev
安装完成后执行 webpack 即可
注意: 如果 webpack 打包时报错 Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
解决办法
执行命令 cnpm link webpack --save-dev
然后在执行 webpack 就可以了
附上最后生成文件后的目录结构图:
附上 webpack.config.JS 全部内容
- // 为了使用插件, 需要将 require()其添加到 plugins 阵列中. 使用 new 运算符调用插件来创建插件的实例.
- const HtmlWebpackPlugin = require('html-webpack-plugin');
- const webpack = require('webpack'); // 用于访问内置插件
- const path = require('path');
- module.exports = {
- entry: { // 入口配置
- index: './src/index.js',
- ctrl: './ctrls/ctrl.js'
- },
- // 这里 [] 里的 name 就是 App 和 search 也就是 entry 里的 key 值
- // 这里 [hash:5] 会随机生成一个版本号作为你的打包 JS 版本
- // 建议最后一次打包才加上.[hash:5] 否则每次打包都同一个文件都会生成新的版本号不同的文件
- output: { // 出口配置
- // filename: '[name].[hash:5].js',
- filename: '[name].js',
- path: __dirname + '/dist' // 生成新文件的地址
- },
- module: {
- rules: [{
- test: /(\.jsx|\.JS)$/, // 处理以. jsx 或. JS 结尾的文件
- use: {
- loader: "babel-loader", // 用 babel-loader 处理
- options: {
- "presets": [
- ["@babel/preset-env", {
- "targets": {
- "browsers": ["> 1%", "last 2 versions"]
- }
- }]
- ]
- }
- }
- }]
- },
- //HTML-webpack-plugin 生成器通过自动注入所有生成的包为应用程序生成 HTML 文件
- plugins: [
- new HtmlWebpackPlugin({ // 地址为 output 对应的 path 地址 dist
- template: './src/index.html', // 处理模板
- filename: '../index.html' // 生成模板
- // 无 chunks 参数默认全部注入
- }), new HtmlWebpackPlugin({
- template: './src/a.html', // 处理模板
- filename: '../views/view1.html', // 生成模板
- chunks: ['index'] // 只引入 index.JS
- })
- ]
- }
共勉, 望鞭策!
来源: https://www.cnblogs.com/puyongsong/p/12080184.html