左右悬停代码网站,网站icp备案查询截图,网站服务器和空间,公司邮箱后缀正确的是以下背景
升级过程中发现有很多新的知识点#xff0c;虽然未来可能永远都不会再遇到#xff0c;但是仍然是一次学习的好机会#xff0c;可以让自己知道#xff0c;打包软件的进化之路#xff0c;和原来 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 处理非常简单配置也非常简单
因为注入脚本是一整套塞进去的字体csshtml 都应该打包在一个 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 意为“转变”、“转换”、“变形”
因为我们设定了 babel 的兼容 ES12所以下面这些转化基本都用不到因为 Chrome 能支持所以也不需要这些插件你可以直接用最新的语法如?? 或 ?. ES12的一些关键语法糖 逻辑赋值运算符 ||??这些运算符允许更简洁地对变量进行赋值操作。 数字分隔符 使用下划线 _ 作为数字分隔符提高数值的可读性例如 1_000_000。 Promise.any 返回第一个成功的 Promise若所有 Promise 都失败则返回 AggregateError。 WeakRefs 和 FinalizationRegistry 提供对垃圾回收机制更精细的控制允许在对象被垃圾回收时执行回调。 模块命名空间导出 允许通过命名空间方式导出模块提高模块化开发的灵活性。 String.prototype.replaceAll 提供更简便的方法来替换字符串中的所有匹配项而无需使用正则表达式。 私有类字段和方法的改进 增强了类的私有属性和方法的定义和使用方式。
