当前位置：首页 > news >正文

柠檬网络科技网站建设2020中国企业500强榜单

news 2025/9/17 2:35:11

柠檬网络科技网站建设,2020中国企业500强榜单,电影网站系统源码,视频制作平台背景升级过程中发现有很多新的知识点，虽然未来可能永远都不会再遇到，但是仍然是一次学习的好机会，可以让自己知道，打包软件的进化之路，和原来 Webpack 4 版本的差异在哪里。移除的依赖记录 babel/register: 在 Nod…

背景

升级过程中发现有很多新的知识点，虽然未来可能永远都不会再遇到，但是仍然是一次学习的好机会，可以让自己知道，打包软件的进化之路，和原来 Webpack 4 版本的差异在哪里。

移除的依赖记录

@babel/register: 在 Node.js 16 中，许多现代语法已被原生支持，通常不再需要运行时转译。
babel-plugin-transform-runtime: 已被 @babel/plugin-transform-runtime 替代。
file-loader 和 url-loader: Webpack 5 已内置资源处理（Asset Modules），无需额外的加载器。
json-loader: Webpack 5 已原生支持 JSON 导入。

对于资源文件，Webpack 自带的 assert 处理非常简单，配置也非常简单

因为注入脚本是一整套塞进去的，字体，css，html 都应该打包在一个 js 里面，以 base64 方式注入，其中 dataUrlCondition 这个配置非常棒，只要将 maxSize 设置得足够大，就可以将字体文件也打包到 js 文件里面去，这样就特别方便 DOM 的注入和挂载

// 使用 Webpack 5 的 Asset Modules 处理资源文件
{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,type: 'asset',parser: {dataUrlCondition: {maxSize: 10000, // 小于 10kb 的文件转为 base64},},generator: {filename: 'imgs/[name][ext]',},
},
{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,type: 'asset',parser: {dataUrlCondition: {maxSize: 100000,},},generator: {filename: 'fonts/[name][ext]',},
},

过时的 babel 插件

@babel/plugin-proposal-class-properties
@babel/plugin-proposal-nullish-coalescing-operator
@babel/plugin-proposal-optional-chaining
@babel/plugin-proposal-private-methods

批量移除它们，proposal 这些都已经被作为正式版包使用了

npm install --save-dev @babel/plugin-transform-class-properties @babel/plugin-transform-nullish-coalescing-operator @babel/plugin-transform-optional-chaining @babel/plugin-transform-private-methods

node 16 和 chrome 106 版的 ES12 语法支持

通过在.babelrc 中配置预设环境，让 babel 按照 node 版本/Electron 版本/Chrome 版本来转义，因为上述版本都比较高，ES12 语法均已支持，所以 babel 基本上不会再进行转义，打包速度极快

{"comments": false,"env": {"main": {"presets": [["@babel/preset-env",{"modules": "commonjs","targets": {"node": "16"},"useBuiltIns": "usage","corejs": 3,"bugfixes": true}]]},"renderer": {"presets": [["@babel/preset-env",{"modules": false,"targets": {"electron": "22"},"useBuiltIns": "usage","corejs": 3,"bugfixes": true}]]},"preload": {"presets": [["@babel/preset-env",{"modules": false,"targets": {"electron": "22"},"useBuiltIns": "usage","corejs": 3,"bugfixes": true}]]},"web": {"presets": [["@babel/preset-env",{"modules": false,"targets": {"chrome": "106"},"useBuiltIns": "usage","corejs": 3,"bugfixes": true}]]}},"plugins": ["@babel/plugin-transform-runtime"]
}

babel 插件的分类

@babel/plugin-proposal-... 插件：
- 这些插件用于支持 ECMAScript 提案阶段的语法特性，即尚未正式成为 JavaScript 标准的功能。
- 它们允许开发者在这些特性正式标准化前提前使用相关语法。
- proposal 单词翻译为“提案”、“建议”、“方案”，类似于还没有完全采纳的意思
@babel/plugin-transform-... 插件：
- 这些插件用于转换已经被正式纳入 ECMAScript 标准的语法特性。
- 它们确保这些标准特性在目标环境（如旧版浏览器或 Node.js）中能够正确运行。
- Transform 意为“转变”、“转换”、“变形”