Kurumi: 使用xhr非同步載入UMD模組

摘要： 在日常業務開發中，隨著bundle體積的增加，我們不得不進行code split，例如react、react-dom、vue、lodash等三方模組，通常是單獨打包成一個js-bundle。即使這樣，不同專案之間的相同的js-bundle並不能做到複用。 Kurumi的誕生就是為了解決這個問題...

在日常業務開發中，隨著bundle體積的增加，我們不得不進行code split，例如react、react-dom、vue、lodash等三方模組，通常是單獨打包成一個js-bundle。即使這樣，不同專案之間的相同的js-bundle並不能做到複用。 Kurumi的誕生就是為了解決這個問題。

介紹

通過url去加指定載模組的原始碼，前提是這個模組遵循umd規範。與此同時，通過這種方式載入的模組並不會汙染全域性變數。 你可以使用 await 去控制載入：

const myLodash = await Kurumi('https://unpkg.com/[email protected]/lodash.min.js');
console.log(myLodash.template(`Wow! so cool! <%= name %>`)({ name: 'Kurumi!!!' })); // Wow! so cool! Kurumi!!!
console.log(lodash) // undefined
複製程式碼

或者 .then

Kurumi('https://unpkg.com/[email protected]/lodash.min.js')
.then((lodash) => {
console.log(lodash.template(`Wow! so cool! <%= name %>`)({ name: 'Kurumi!!!' }));
})
複製程式碼

本地使用時不再需要安裝依賴 瀏覽器端載入過的node_module會自動快取，下一次使用時會自動從disk-cache載入，因此從同一url下載過的模組可以實現不同專案之間的複用。

安裝

npm install kurumi

使用

Brower

<script src="https://unpkg.com/kurumi/lib/Kurumi.min.js"></script>
<script>
Kurumi('https://unpkg.com/[email protected]/lodash.min.js')
.then((lodash) => {
console.log(lodash.template(`Wow! so cool! <%= name %>`)({ name: 'Kurumi!!!' }));
})
</script>
複製程式碼

Webpack

import Kurumi from 'kurumi';
Kurumi('https://unpkg.com/kurumi/lib/Kurumi.min.js')
.then((lodash) => {
console.log(lodash.template(`Wow! so cool! <%= name %>`)({ name: 'Kurumi!!!' }));
})
複製程式碼