202110-federation

Transcript

1. 如何用 Vue 發大財 Vue Component 跨網站共用法則 milkmidi
2. milkmidi (奶綠茶) Positive Grid – Staff Frontend Enginner milkmidi@gmail.com https://www.facebook.com/milkmidifans
3. 答：寫程式不會發大財 圖片來源：找不到出處
4. 2021 前端生態圈 jQuery, Vue, React, 其他 圖片來源：找不到出處
5. 不管什麼 framework, 都需要 bundle 工具 什麼，你是純 JS 派，不用任何 bundle 工具
6. bundle 工具 1：parcel 優：快 圖片來源：找不到出處
7. bundle 工具 2：Vite 優：快 缺：IE 不能動
8. 今天的主角 Webpack 5 對，一定要 5，對，就是這麼任性
9. 先來了解多專案共用 Component 的心法 圖片來源：我家的主子
10. 心法1：Copying and Pasting 優：人人都會，現學現會，發大財 缺：會被團隊的人打 圖片來源：goodreads.com
11. 心法2：Git Submodule 優：會 git 就會用 缺：很難做到 Component 版控
12. 心法3：npm publish 缺：如果 Component 很常修改的話，會需要一直 publish
13. 今天的主角 webpack5 Federation Plugin https://webpack.js.org/concepts/module-federation/ Module Federation 是什麼 ? 一種 JavaScript 的微前端架構 可以讓一個 JS 動態載入另一個專案的元件 聽起來是不是超爽的
14. 來人呀，上 Code A 站，暫稱 Provider // webpack.config.js output: { publicPath: ‘http://localhost:9527/’, 這裡一定要是絕對路徑 }, new ModuleFederationPlugin({ name: ‘milkmidiLibrary’, // Module 名稱(會變成 window 變數) filename: ‘remoteEntry.js’, // 打包後的檔名 exposes: { // 想要共用的元件 './MyButton': './src/components/MyButton.vue', './MyModel': './src/libs/MyModel', './useDataWithLodash': './src/hooks/useDataWithLodash', }, })
15. 來人呀，上 Code A 站，暫稱 Provider
16. MyModel.ts 沒載入任何第三方 package export const add = (a:number, b:number):number => a + b; const config = { name: 'milkmidi-MyModel', value: '發大財', }; export default config;
17. useDataWithLodash.ts import { reactive, onMounted } from 'vue'; import _ from 'lodash'; export type UseFetchDataType = { isLoading : boolean; data?: string; } const useFetchData = ():UseFetchDataType => { const state:UseFetchDataType = reactive({ data: undefined, isLoading: false, }); onMounted(async () => { state.isLoading = true; state.data = _.get({ name: 'milkmidi' }, 'name'); state.isLoading = false; }); return state; }; export default useFetchData;
18. 對，就是這麼簡單
19. 問題 共用的第三方 module (vue, lodash)該怎麼辦 ? 總不能每個站都載一次吧
20. Shared // webpack.config.js const deps = require('./package.json').dependencies; new ModuleFederationPlugin({ 略 shared: { ...deps, vue: { // 這個參數是重點。ture 的話，會先把有用到的 node_modules 都先包裡來 // eager: true, // 奶綠覺得不要打開 // only a single version of the shared module is allowed singleton: true, // strictVersion: true, // 開了 host 和 remote 就會需要一樣的版本 requiredVersion: deps.vue, }, } })
21. Uncaught Error: Shared module is not available for eager consumption
22. bootstrap.js (不是那個 bootstrap css) // bootstrap.js import { createApp } from 'vue'; import App from './App.vue'; createApp(App) .mount('#root'); // index.js import { createApp } from 'vue'; import App from './App.vue'; createApp(App) .mount('#root’); import('./bootstrap');
23. Shared eager = false;
24. Shared eager = false; js 未 minify
25. Shared eager = true; vue 被包到 remoteEntry.js 裡了
26. 來人呀，上 Code B 站，暫稱 host (B 站沒安裝 lodash) // webpack.config.js new ModuleFederationPlugin({ remotes: { milkmidiLibrary: 'milkmidiLibrary@http://localhost:9527/remoteEntry.js', }, shared: { ...deps, vue: { 略 }, }, }),
27. B 站 一樣要有 bootstrap.js // 就像一般的寫法，直接當 module import, 超爽 import MyModel, { add } from 'milkmidiLibrary/MyModel'; import MyButton from 'milkmidiLibrary/MyButton'; import useDataWithLodash from 'milkmidiLibrary/useDataWithLodash’; export default { setup() { const state = useDataWithLodash(); return { state, }; }, mounted() { console.log(MyModel); console.log('MyModel.add(1,1) = ', add(1, 1)); }, }; </script> <template> <div id="app"> <h1>Host</h1> <MyButton /> <MyButton :default-value="10" /> /div> </template>
28. 來人呀，上 Code B 站，暫稱 host (B 站沒安裝 lodash)
29. 來人呀，上 Code C 站 , 不要用 bootstrap + 使用 script 載入 // webpack.config.js new ModuleFederationPlugin({ remoteType: 'var', remotes: { milkmidiLibrary: 'milkmidiLibrary', }, shared: { vue: { // 如果沒有 bootstrap, 所有用到的 shared 都需要打開 eager eager: true, 略 }, }, }), // index.html <script src="http://localhost:9527/remoteEntry.js" defer></script>
30. import('milkmidiLibrary/MyModel').then((myModel) => {}); const MyButton = defineAsyncComponent(() => import('milkmidiLibrary/MyButton’)); export default { setup() { const state = reactive({ data: undefined, isLoading: false, }); // 在這樣的情況下，就會無解，因為 hooks 不能是非同步載入 // 還是其實可以? (我要 tag kuro 大大), 至少我確定 react 不行 import('milkmidiLibrary/useDataWithLodash').then((module) => { const result = module.default(); console.log(result); state.isLoading = result.isLoading; state.data = result.data; // not work. OOP }); return { state, }; }, }; </script>
31. Module Federation 不限 Vue, 只要是 JS 都可以用 github source
32. 沒有永遠的技術 想當年我也想靠 Flash 吃一輩子 結果 Jobs 一句話就.... 圖片來源：Jobs 說 no flash, 然後林北就失業了。
33. 學習不需要為公司、長官或同事， 不需要為別人，只為你自己。 五倍紅寶石 高見龍
34. 奶綠茶的粉絲團 https://www.facebook.com/milkmidifans