欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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 的配置。