Biu-blog
Biu-blog copied to clipboard
CommanderXL
个人博客
## @babel/preset-env `@babel/preset-env` 主要的功能是依据项目经过 `babel` 编译构建后产生的代码所对应运行的目标平台。`@babel/preset-env` 内部依赖了很多插件： `@babel/plugin-transform-*`。这些插件的工作主要就是 `babel` 在处理代码的过程当中对于新的 ES 语法的转换，将高版本的语法转化为低版本的写法。例如 `@babel/plugin-transform-arrow-function` 是用来转化箭头函数语法的。 基本的配置方法： ```javascript // babel.config.json { "presets": [ [ "@babel/preset-env", { // 相关 preset 的配置 } ]...
`Composition Api` 作为一个单独的插件被挂载是 `Vue` 根的构造函数上。 ## setup 初始化函数 ```javascript // *.vue export default { setup(props) { ... return { // setup 函数里返回的内容可以用于组件的其余的部分 ... } } } ``` 插件混入了全局的钩子函数，在 `beforeCreated` 执行的阶段完成一些...
整体上的实现思路是基于小程序的开发规范然后再做跨 web 的兼容。因为 mpx 也是采用 sfc 方式去组织文件内容（包括template/script/style/json），底层框架是基于 vue。 ### 编译环节： 在编译环节需要解决的一个核心问题就是 mpx sfc 如何转化为 vue sfc，在这一层处理完之后，后面的编译构建流程即可直接复用 vue-loader（即 vue 项目的编译构建）的构建流程。 本地编译启动后，mpx 文件首先会经过 mpx loader 的处理，只不过在 mpx loader 内部针对 web 环境下的编译工作做了一些特殊处理： ```javascript...
不同于其他的全运行时小程序框架可以在上层直接使用 Vue、React，在生态能力的复用上会更加的容易，用一部分的性能牺牲换取了开发体验。mpx 作为编译型小程序框架依托小程序规范做能力增强，运行时部分极为轻量简洁，配合编译构建阶段的包体积优化和基于Render Function的数据依赖追踪做到业内小程序的性能最优。 在我们的实际业务场景当中也经常会遇到 mpx 转 web，然后想复用 web 生态能力的场景，例如在司机运营活动的场景中，我们沉淀了在 web 场景下统计页面元素节点曝光的工具库: [exposure-lib](https://github.com/hubvue/exposure-lib)，不过我们的项目是使用 mpx 来做跨平台的开发，所以在跨 web 场景下，mpx 通过暴露 `mpx.__vue` 这个 Vue Constructor 来给 `exposure-lib` 消费，最终使用 mpx 进行 web 侧的开发也可以非常便利的去享用 web...
## 基本介绍 持久化缓存是 webpack5 所带来的非常强大的特性之一。一句话概括就是构建结果持久化缓存到本地的磁盘，二次构建(非 watch 模块)直接利用磁盘缓存的结果从而跳过构建过程当中的 resolve、build 等耗时的流程，从而大大提升编译构建的效率。 持久化缓存主要解决的就是优化编译流程，减少编译耗时的问题，通过全新的缓存系统的设计使得整个构建流程更加的高效和安全。在此之前官方或者社区也有不少解决编译耗时，提高编译效率的方案。 例如官方提供的 [`cache-loader`](https://github.com/webpack-contrib/cache-loader)，可将上一个 loader 处理的结果缓存到磁盘上，下一次在走这个流程的时候(pitch)依据一定的规则来使用缓存内容从而跳过后面 loader 的处理。不过 `cache-loader` 也仅仅能覆盖到经由 `loader` 处理后的文件内容，缓存内容的范围比较受限，此外就是 `cache-loader` 缓存是在构建流程当中进行的，缓存数据的过程也是有一些性能开销的，会影响整个的编译构建速度，所以建议是搭配译耗时较长的 loader 一起使用。另外就是 `cache-loader` 是通过对比文件 metadata 的 timestamps，这种缓存失效策略不是非常的安全，具体见[我之前遇到的case](https://github.com/CommanderXL/Biu-blog/issues/48)。 此外还有...
## Webpack Chunk 生成策略源码探索 这篇文章主要是通过源码去探索下 webpack 是如何通过在编译环节创建的 module graph 来生成对应的 chunk graph。 首先来了解一些概念及其相互之间的关系： 1. chunkGroup，由 chunk 组成，一个 chunkGroup 可以包含多个 chunk，在生成/优化 chunk graph 时会用到； 2. chunk，由 module 组成，一个 chunk 可以包含多个 module，它是...
## childCompiler 子编译 webpack 子编译可以理解成创建了一个新的构建流程。webpack 内部的 compilation 的实例上提供了创建子编译流程的 API：createChildCompiler。 ```javascript class Compilation { ... /** * This function allows you to run another instance of webpack inside of webpack however...
循环依赖
## Es Module 和 CommonJS 对于循环依赖功能支持的执行策略 Es Module 和 CommonJS 规范都支持循环依赖。不过2个规范对于模块的加载和执行的策略不一样，所以在实际场景当中如果遇到了循环依赖的情况的话， CommonJS 规范从加载策略来说是运行时加载，即代码执行到需要加载模块的那一行代码的时候，才会去加载并执行对应依赖的模块。举个例子： `foo.js`和`bar.js`形成了一个循环依赖。这里可以看到`foo.js`**导出变量书写的位置**直接影响到了`bar.js`代码的执行。当`bar.js`开始执行的时候，如果在`foo.js`还未执行到`exports.setFooParams`导出这个方法的时候，在`bar.js`里面是访问不到对应方法的，这样程序执行的时候也就会报错。那么规避这种情况的一个处理方法就提前将`exports.setFooParams`方法置于文件的顶部，提前导出。 ```javascript // foo.js const { setBarParams } = require('./bar') const params = {} exports.setFooParams = function...
### 背景 最近遇到一个更新了 package，但是本地编译打包后没有更新代码的情况，先来复现下这个 case 的流程： 1. A 同学在 npm 上发布了`0.1.0`版本的 package； 2. B 同学开发了一个新的 feature，并发布`0.2.0`版本； 3. C 同学将本地的`0.1.0`版本升级到`0.2.0`版本，并执行`npm run deploy`，代码经过 webpack **本地编译**后发布到测试环境。但是测试环境的代码并不是最新的 package 的内容。但是在 node_modules 当中的 package 确实是最新的版本。 这个问题其实在社区里面有很多同学已经遇到了：...
`mpx` 整体还是基于小程序的原生事件系统进行相关功能的设计及增强的。在原生小程序的父子组件进行通讯的时候，统一调用 triggerEvent 来在子组件当中触发对应的事件，而在父组件的模板当中需要定义好响应事件的回调函数。具体参见[文档](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html)。 `mpx` 对于原生的小程序的事件能力做了整体的增强，主要是包含了以下的几个方面： * 事件处理内联传参; * wx:model 双向绑定; * wx:model-prop 双向绑定属性; * wx:model-event 双向绑定事件; * wx:model-value-path 双向绑定数据路径; * wx:model-filter 双向绑定过滤器; PS: 这里把 `wx:model` 的能力放到这里来说主要也是因为 `wx:model` 也是一种语法糖，内部实际还是利用了事件相关的能力来完成数据的双向绑定。 首先来看下事件处理内联传参的能力增强，基本的使用方法参见[文档](https://www.mpxjs.cn/guide/basic/event.html)。...