demo04 webpack + babel7
栏目: JavaScript · 发布时间: 5年前
内容简介:babel 7 于 2018 年 8 月份发布,在 babel 7 中,所有官方包更名为以 @babel 为开头,并且 babel 7 推荐使用 babel.config.js 来配置 babel 。关于 babel 7 的重大改变,请参考这篇文章:Babel 7 发布对 babel 7 不熟的请先撸一下 babel 7 的配置文档:
babel 7 于 2018 年 8 月份发布,在 babel 7 中,所有官方包更名为以 @babel 为开头,并且 babel 7 推荐使用 babel.config.js 来配置 babel 。
关于 babel 7 的重大改变,请参考这篇文章:Babel 7 发布
对 babel 7 不熟的请先撸一下 babel 7 的配置文档: babel.docschina.org/docs/en/
2.安装相关依赖包
@babel 相关
npm install --save-dev @babel/core @babel/preset-env npm install --save @babel/polyfill //(注意没有-dev ) 复制代码
webpack 相关
npm install --save-dev babel-loader 复制代码
相关包介绍:
@babel/core: babel的核心功能
@babel/preset-env: @babel/preset-env 是一组官方已经配置好的babel plugins预设,省去了自己配置的plugins的麻烦
@babel/polyfill: @babel/polyfills 用来实现所有新的javascript功能,比如 Promise , WeadMap , Array.prototype.includes 等
@babel/polyfills 的三种使用方法
方法1)在代码入口 import "@babel/polyfill";
方法2)通过配置 "useBuiltIns: "usage"
(推荐用法)
方法3)webpack 的 entry 中引入
entry: ["@babel/polyfill","./src/app.js"] // "@babel/polyfill" 需作为第一个 复制代码
注意,@babel/polyfill 需要打包进代码中,因此需要以 npm install(没有-dev)--save @babel/polyfill
的形式来安装
3.目录结构
// `--` 代表目录, `-` 代表文件 --demo04 --src -app.js -babel.config.js -index.html -webpack.config.js 复制代码
src/app.js
// import "@babel/polyfill"; let func = () => { }; /** * Array.prototype.includes 不兼容 ie 11,详见 mdn 文档 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes * 所以需要通过 @babel/polyfill 来实现 */ const pets = ['cat', 'dog', 'bat']; console.log(pets.includes('cat')); /** * new Set不兼容 ie 11,详见 mdn 文档 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set */ const set1 = new Set([1, 2, 3, 4, 5]); console.log(set1.has(1)); /** * WeakMap 的 set方法在 ie 11 下不支持,详见 mdn 文档 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap */ var o1 = {}, o2 = function () { }, o3 = window; let weakmap = new WeakMap(); weakmap.set(o1, 1); weakmap.set(o2, 2); weakmap.set(o3, 3); console.log(weakmap.get(o1)); // => 1 复制代码
4.编写 babel 配置文件
babel.config.js
const presets = [ [ "@babel/env", { targets: { // 配置需要兼容的浏览器 edge: "17", firefox: "60", chrome: "67", safari: "11.1", ie: "11" }, useBuiltIns: "usage" }, ], ]; module.exports = { presets }; 复制代码
useBuiltIns 说明:
通过设置 "@babel/env" 的 "useBuiltIns" 为 "usage" ,省去了手动导入 @babel/polyfill 的过程,而且更重要的是,通过此方式,babel 只会帮你 import 代码中所用到的 polyfill,避免导入整个 @babel/polyfill 包(压缩后将近80k)。
(你可以把 useBuiltIns 注释,并且在 app.js 手动 import "@babel/polyfill"
试试,会导致整个包变大。)
5.编写 webpack 配置文件
webpack.config.js
module.exports = { entry: { app: "./src/app.js" }, output: { filename: "bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /(node_modules)/, use: { loader: "babel-loader" } } ] } }; 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。