webpack-babel2

2024-04-22 07:04
文章标签 webpack babel2

本文主要是介绍webpack-babel2，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

浏览器的兼容性问题

浏览器的兼容性问题不知包括随屏幕大小而变化，还包括针对浏览器支持的特性（如css特性，js特性） 做处理。
目前市场上有很多浏览器：Chrome,Safari,IE,Edge等，要根据它们的市场占有率来决定是否兼容它们。
在脚手架中经常看到类似的配置:
在这里插入图片描述
在生产环境中，该配置指定了支持的浏览器版本范围，包括超过全球市场份额0.2%的浏览器、尚未停止维护的浏览器，以及排除了Opera Mini所有版本的浏览器。
在开发环境中，该配置指定了最新版本的Chrome、Firefox和Safari浏览器。这有助于开发人员和构建工具确定在不同环境中需要支持的浏览器版本。

可以在https://caniuse.com/usage-table查看浏览器的市场占有率。
在这里插入图片描述

browserslist

browserslist可以在不同的前端工具(如babel,postcsspreset-env,Autoprefixer等)之间共享目标浏览器和node版本的配置。
编写这样的 配置后，会使用 caniuse-lite(工具的数据来自caniuse网站上)获取浏览器的信息，决定是否支持该浏览器。

      ">0.2%","not dead","not op_mini all"

browserslist的编写条件说明

  1. defaults: (>5%,last 2 versions ,Firefox ESR , not dead)

  2. 5% 还可以配合>=,<= ,in等使用。：
    · >=5% in US 在美国使用率大于或等于5%的浏览器
    在这里插入图片描述

  3. dead: 24个月内没有官方支持或更新的浏览器。

  4. last 2 versions 每个浏览器的最后两个版本。
    在这里插入图片描述
    其他不常用的规则：
    在这里插入图片描述

配置 browserslist

可以在package.json中配置：
在这里插入图片描述
也可以单独配置一个.browserslistrc文件
在这里插入图片描述

配合babel使用

可以设置targets进行配置
在这里插入图片描述

配置targets会覆盖browserslist的配置，所以一般推荐在browserslist中配置，因为想postcss等要使用browserslist进行适配。

Stage-X (了解)

TC39是指技术委员会(Technical Committee)第39号,它是ECMA(ECMAScript规范下的JavaScript语言规范化的机构)的一部分，ECMA固定了 JavaScript如何一步步发展的。
TC39会在不同的阶段加入不同的语言特性，新流程设计4个不同的Stage:
Stage 0: strawman(稻草人) 尚未提交最为正式议案的讨论，想法，补充等。

Stage 1: proposal(提议) 提案被正式化，但还需要考察与其他提案的相互影响。

Stage 2: draft(草稿) 提案提供了规范的初稿、草稿，语言的实现者会观察下runtime(运行时)是否合理。

Stage 3: candidate(候补) 在这个阶段，规范的编辑人员和审核人员在最终规范上签字， Stage 3阶段的提案不会有太大的改变，在发布前会修改一些问题。

Stage 4: finished(完成) 提案会在下一个ECMAScript规范中发布

在babel 7之前 可以看到这样的写法 babel-preset-stage-x,在7之后推荐使用preset-env来设置：

module.exports = {//预设presets: ["stage-0"],
};

babel的配置文件

babel提供了两种配置文件的编写：
babel.config.json(.js,.cjs,mjs) ：babel7之后 可以直接作用于Monorepos项目的子包，更推荐。
.babelrc.json(或.babelrc,.js,.cjs,.mjs):早期配置比较多，但对于配置Monorepos项目比较麻烦

polyfill 垫片，补丁

es6中一些特殊的语法例如const,let,function会通过babel转换成es5的语法，但对于Promise,Symbol .includes(),.isArray()等一些es5中原本没有语法要通过polyfill来处理。
使用polyfill: npm i core-js regenerator-runtime --save
需要下babel-config.js中对preset配置一些属性：
useBuiltIns:设置以什么样的方式使用polyfill
corejs: 设置corejs的版本。还可以设置是否对提议阶段的特性支持。

useBuiltIns 三个常见的值

  1. false
    打包后的文件不使用polyfill进行适配，这个时候不需要对corejs进行配置。
    2.usage
    会自动检测需要polyfill的代码，打包后的代码体积较小，需要设置corejs
module.exports = {presets: [["@babel/preset-env",{useBuiltIns: "usage", corejs: 3.8, // targets: "> 0.25%, not dead",},],],
};

打包后的文件：
在这里插入图片描述
需要注意的是browserslist的配置也会影响打包后的结果，
在这里插入图片描述
例如>0.5%(大于5%的浏览器兼容性较好，支持es6),打包后的代码与原来的代码差别不大。
在这里插入图片描述
3. entry
如果依赖某个库本身使用了polyfill的某些特性，设置为usage后会报错，这时可以使用entry。
还需要在入口文件中添加import "core-js/stable" import "regenerator-runtime/runtime"
它会根据browserslist的配置导入所有的使用polyfill，会导致打包后的文件体积较大。
在这里插入图片描述
在这里插入图片描述

使用react,jsx

jsx需要babel转换，因此需要安装对应的preset:
npm i @babel/preset-react -D
此外还需要安装react对应的包：npm i react react-dom

配置webpack:
在这里插入图片描述
index.html:
在这里插入图片描述
main.js:
在这里插入图片描述

配置ts

安装 ts的comoiler

可以安装 ts的comoiler来转换为ts :npm i typescript -d
另外还需要生成一个tsconfig.json文件: tsc -- init(必须要先全局安装npm install typescript -g)
然后在用npx tsc 进行编译

ts-loader

可以使用webpack配置ts-loader:
npm i ts-loader -D
在这里插入图片描述

使用babel

还可以使用babel:
npm i @babel/preset-typescript -D
webpack:

在这里插入图片描述
babel.config.js:
在这里插入图片描述

ts-loader 和babel 的选择

ts-loader可以将ts转换为js还会进行类型校验，但是无法使用babel的polyfill.
babel可以使用polyfill，但无法进行类型校验。
在打包前可以先进行类型的校验，然后在打包。
可以使用两个脚本，进行检测
npm run type-check 可以对类型进行检测
npm run type-check-watch 可以实时对类型进行检测

  "scripts": {"build": "npx webpack","ts-check":"tsc  --noEmit","tc-check-watch":"tec --noEmit --watch"},

全部代码：
webpack:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {mode: "production",devtool: "source-map",entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),clean: true,},resolve: {extensions: [".js", ".json", ".jsx", ".tsx", ".ts"],},module: {rules: [{test: /\.m?js$/,exclude: /node_modules/,use: {loader: "babel-loader",},},{test: /\.jsx$/,use: "babel-loader",},{test: /\.ts$/,use: "babel-loader",},],},plugins: [new HtmlWebpackPlugin({title: "test项目",template: "./index.html",}),],
};

babel:

module.exports = {presets: [["@babel/preset-env",{useBuiltIns: "entry", // 按需引入 corejs 中的模块corejs: 3.8, // 核心 js 版本// targets: "> 0.25%, not dead", // 浏览器支持范围},],["@babel/preset-react"],["@babel/preset-typescript", {useBuiltIns: "usage", corejs: 3.8, },],],
};

.browserslistrc

 > 0.25%last 2 versionnot dead

这篇关于webpack-babel2的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/925100。

相关文章

vue-cli webpack在node环境下安装使用

vue-cli webpack在node环境下安装使用

第一步，需要下载并安装node.js以及他的npm组件； 　　第二步，用node -v;npm -v来测试node.js以及npm是否安装成功（建议用GIT命令行工具，因为GIT是linux系统），如果显示出它的版本，说明已经安装成功，如下图；  　第三步，下载vue-cli，在命令行中输入npm install -g vue-cli，自动下载vue-cli（会生成一大堆的依
阅读更多...
webpack-AST剖析

webpack-AST剖析

webpack-AST 目录 文章目录 前言推荐阅读拆解函数`AST`工具 - `recast`制作模具 - `recast.types.builders`如何改装 实战 - 命令行修改`js`文件`recast.visit` - `AST`节点遍历`TNT` - 判断`AST`对象类型`AST`修改源码，导出全部方法`Builder`实现一个箭头函数 `exportific`前端工具使用
阅读更多...
webpack-模块热替换剖析

webpack-模块热替换剖析

webpack-模块热替换剖析 目录 文章目录 前言推荐阅读前提`HMR`应用开启`HMR`开启`webpack-dev-server`的`HMR`手动添加代码 `HMR`原理步骤 前言 主要讲解热更新的原理 推荐阅读 《webpack实战 入门、进阶与调优》 前提 早期调试代码基本都是 改代码 - 刷新网页 - 查看 - 修改代码第一次提升效率：工具检测到代码改动
阅读更多...
webpack处理css

webpack处理css

在神奇的babel中我们提到了babel-loder的使用，那么webpack声称可以处理任何类型的文件，css该怎么处理呢，好，我们来走一遍 首先介绍下style-loader和css-loader，因为处理css文件之前必须要安装这两个模块，至于这俩是从哪冒出来的，请看点击打开链接，这里详细介绍了各种loader的使用场景。 npm install css-loader style-l
阅读更多...
webpack的文件监听实现（热更新）

webpack的文件监听实现（热更新）

注意：安装之前，先保证webpack项目能正常运行！ 目录 前言1 第一种方式， --watch1.1 配置package.json1.2 到控制台输入 npm run watch1.3 修改文件，保存后，会自动打包，到浏览器刷新，才能看到变化。1.4 文件监听的原理理分析 2 第二种方式，在配置 webpack.config.js 中设置 watch: true（热更新:webpack-
阅读更多...
webpack解析字体，file-loader

webpack解析字体，file-loader

注意：安装之前，先保证webpack项目能正常运行！ 因为字体和图片都不是代码文件，所以，都可以使用file-loader 1.安装 file-loader 依赖 cnpm i file-loader -D 2.在src目录下创建font文件夹，并引入字体 （这里引入AdobeGothicStd-Bold.otf.otf ） 3.配置，在 webpack.config.js 下新增配置：
阅读更多...
webpack解析css, less，scss

webpack解析css, less，scss

注意：安装之前，先保证webpack项目能正常运行！   1.安装依赖 npm install style-loader css-loader -D npm install less less-loader -D   2.配置，在 webpack.json.js 下，新增规则： module.exports = {// ...module:{rules:[// ...// 新增cs
阅读更多...
webpack解析React JSX

webpack解析React JSX

1.安装 cnpm i react react-dom @babel/preset-react -D 2.在 .babelrc 文件下，增加配置： {"presets": ["@babel/preset-env","@babel/preset-react" // 新增 react 配置]}
阅读更多...
webpack解析ES6

webpack解析ES6

注意：安装之前，先保证webpack项目能正常运行！ 1.安装 npm i @babel/core @babel/preset-env babel-loader -D   2.在src目录下，创建 .bebalrc 文件，并配置： {"presets": ["@babel/preset-env"]} 3.修改 webpack.config.js 配置： module.exports
阅读更多...
webpack对样式的处理

webpack对样式的处理

webpack对样式的处理   原文地址：https://github.com/zhengweikeng/blog/issues/9 我们可以在js中引入样式文件 require('myStyle.css') 这时我们便需要引入相应的webpack loader来帮助我们解析这段代码。 一般来说需要引入css-loader和style-loader，其中css-load
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2