webpack4 babel 篇
程序员文章站
2022-03-23 13:37:09
"demo 代码点此" ,如果对 babel 不熟,可以看一下 "babel 7 简单指北" 。 webpack 使用 babel 来打包使用 es6 及以上语法的 js 文件是非常方便的,可以通过配置,将 es6 转化为 es5. start 准备个空文件,执行如下命令: 然后创建一个 dist ......
,如果对 babel 不熟,可以看一下。
webpack 使用 babel 来打包使用 es6 及以上语法的 js 文件是非常方便的,可以通过配置,将 es6 转化为 es5.
start
准备个空文件,执行如下命令:
npm init -y npm i -d webpack webpack-cli npm i -d babel-loader @babel/core
然后创建一个 dist 文件夹,创建一个 html 文件:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>webpack4 babel 篇</title> <body> <div id="root"></div> <script type="text/javascript" src="bundle.js"></script></body> </html>
根目录下创建 webpack.config.js,配置 webpack:
const path = require('path'); module.exports = { mode: 'development', entry: { main: './index.js', }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", }, ], }, devtool: 'source-map', // 出口 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, }
为了转化 es6 代码,要安装 babel 插件:
npm i -d @babel/preset-env @babel/polyfill
然后在根目录下创建 babel 配置文件 .babelrc:
{ "presets": [ [ "@babel/preset-env", { "usebuiltins": "usage", "targets": { "browsers": ["last 2 versions", "ie >= 10"] } } ] ] }
然后在根目录下创建 index.js:
const add = (x, y) => { return new promise((resolve, reject) => { resolve( x + y); }); } add(1, 2).then(res => console.log(res));
打包
终端执行打包:
npx webpack
打开 dist 目录下的 bundle.js,可以看见代码已经转为 es5,搜索 promise,会发现加上了 promise 的 polyfill:
// bundle.js ... var add = function add(x, y) { return new promise(function (resolve, reject) { resolve(x + y); }); }; add(1, 2).then(function (res) { return console.log(res); }); ...
访问 index.html,console 也打印正常。
防止全局污染
如果是写第三方库或者框架,使用 polyfill 可能会造成全局污染,所以可以使用 @babel/plugin-transform-runtime 防止全局污染。
安装:
npm i -d @babel/plugin-transform-runtime npm i -s @babel/runtime @babel/runtime-corejs2
修改 babel 配置:
{ "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 2, "helpers": true, "regenerator": true, "useesmodules": false } ] ] }
打包即可。
备注
这个主要是 babel 的配置。