准备知识：
webpack 是时下流行的代码打包工具。
babel 是一个时下流行的代码（语法）转换工具。（详细介绍请参照官网）
1.
你需要知道的是 babel 默认只转换语法，不转换新 api 。新语法例如箭头函数，可以被转换为 ES5 传统模式；但是 Promise 就不会被转换，因为它属于新 api 。所以如果你想兼容旧时代浏览器，就不得不考虑这些：需要有一个用 ES5 语法构成的模拟器函数来模拟实现这些新 api 特性。这就是我们要用到的 polyfill。polyfill 是要被引入至生产环境的，因为它是真实被使用的实现层。polyfill 是一个文件实现所有功能，撰写本文时笔者并没有研究如何按需加载，所以缺点很明显，那就是冗余，毕竟实现是第一关键步骤。
2.
babel 不转换 import 语法，所以笔者在使用 plugin 配合 runtime 时，走到 import _regenerator from ... 这一步时就跪了，选择了使用 webpack 进行配合转译。
一、npm init 之后执行
npm i -D @babel/core
npm i -D @babel/preset-env
npm i -D babel-loader
npm i -D webpack@3
npm i -D webpack-cli
npm i -s @babel/polyfill
这里注意，时至撰写本文之时，官网发布的可以配合 babel-loader 的 webapck 需要在版本3 以下，此时最新的 webpack 版本是 4.26.1。
挂一下当前实现后的 package.json
{
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"webpack": "^3.12.0",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"@babel/polyfill": "^7.0.0"
}
}
二、配置 .babelrc
{
presets:["@babel/env"]
}
三、配置 webpack.config.js
const path = require('path');
module.exports = {
entry: ["@babel/polyfill",'./index.js'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module:{
rules:[
{
test:/\.js$/,
exclude: __dirname + 'node_modules',
// include:__dirname + 'src', // 目前可有可无
use:{
loader:'babel-loader',
options:{
// plugins:["@babel/plugin-transform-arrow-functions"]
}
}
}
]
}
};
注意：关于 babel 的配置你可以选择在 webpack.config.js 中配置，也可以选择在.babelrc中配置，都可以生效，优先级为 .babelrc > webpack.config.js。
四、在 package.json 的 scripts 中添加
"scripts": {
"build": "webpack"
},
之后可以通过命令行
npm run build
进行转译。
五、更简洁的模式
这里会出现一种情况，你为了调试你的代码不得不经常进行编译命令，为了节省你宝贵的开发时间，这里我们使用 webpack-dev-server 和 HotModuleReplacementPlugin 来配合“模块热替换（HMR）”，它可以通过监测你项目中与依赖有关的任何代码变更来自动触发编译过程，省去你不少麻烦事。详情请参见 webpack 官网。在这里笔者只介绍必要的最小操作步骤。
1.安装 webpack-dev-server
npm i -D webpack-dev-server@2
为了配合本文之前的环境请安装 webpack-dev-server 第2版。
package.json
"devDependencies": {
"webpack-dev-server": "^2.11.3"
}
技巧：每当你在参照官网步骤往下进行，此时发现未知错误且无法通过百度搜索到中文解决方案时，请一定要意识到极可能是插件版本不匹配。
- package.json 添加命令
"scripts": {
"start": "webpack-dev-server --open"
},
3.配置 webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: ["@babel/polyfill", "./index.js"],
devServer: {
contentBase: path.join(__dirname, "dist"),
// hot:true, //默认值为 true，所以可以不用设置
port: 9000,
// watchOptions: {
// poll: 1000
// }
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.js$/,
exclude: __dirname + "node_modules",
use: {
loader: "babel-loader"
}
}
]
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
注：dist 目录下应该有一个 .html 并且此 html 文件引用的是你编译后的文件。
至此，你可以通过启用 npm start 来启动你的小型服务器了。
备注：如此做法可以向下兼容至 ie9。
作者知识水平有限，如有错误，敬请交流指正。
------------ 结束线 ---------------
网友评论