ctripcorp / wean Goto Github PK

umd 文件，通常是一个闭包函数，然后执行完了，就可以挂到 window 上了

那么问题来了……wean 应该怎么打包呢呜呜呜

会报错！！！

npm ERR! could not determine executable to run

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\devserve\AppData\Local\npm-cache_logs\2021-03-15T10_24_35_050Z-debug.log

看上去打包和请求都没啥问题，但不知为何 index 页面的 bundle 像没运行到，使得 window.Page 未运行，继而 graph 的 get 报错。是路由工具 berial 的问题吗？

before：
当前阶段，我们对 js asset 的处理是，先作用域提升，然后分析 export import，再进行tree shaking

import {a} from 'a.js'
// a()

如果一个方法被导入了，但它没有被调用，则现在的 wean 无法 tree shaking 掉
https://medium.com/webpack/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77
解决方案就是，分析 js 文件的作用域，以及引用，这样可以做到 module 级别的 tree shaking

after：
使用 rollup 的思路，1. 构建 module graph，2. 构建 scope chain 3. 后置导入
这个思路除了可以做到更好的 tree shaking，还可以让架构变稳定

因为在构建 module graph 的时候，我们将一棵子树变成一个图，虽然都是 O(n)，但树的遍历远不如一个 for 循环

另外，类似的思路，我们也许会重构 wxml asset，构建 wxml 的 module graph，以便更好地处理 template 和 slot 的 case

数据结构：

app.json
 - Page [
   - page1.js [
     - module1 [a b c]
       - module2 [d e f]
   ], 
   - page1.wxml
    ]
 - Page [page1.js, page2.wxml]

图虫小程序 @ 飘香豆腐 demo clone到本地
cd到demo根目录下依次执行命令
$ yarn add wean
$ npm install
$ npm link
$ wean -e app.json -o /dist/

执行最后一行命令时，显示zsh: command not found: wean。

fre，berial，goober 都通过 cdn 的方式引入

uniapp 比较稳定，也比较好用，不太明白和uniapp 竞争的话，优势在哪

打包后，子组件的样式会影响到父组件，目前没有做一个很好的css隔离。

wx:else 会 编译为 directs.$else(() => ,
看了下好像是通过 const [name, value] = node.directives[i] 获取条件， else 得到的是 [ 'wx:else', '' ]，没有和 if 做联动么？

1. 只支持 esm，可以通过 esbuild 进行预处理，比如
   https://esbuild.vercel.app/[email protected]/dist/fre.umd.js
2. 暂不支持 slot
3. 自定义组件的 data 和 property 会合并