Systemjs
2021-01-27 本文已影响0人
隐号骑士
一个问题
可以在浏览器中引入esm包吗？
index.html
<script src="./main.js"></script>
main.js
import Vue from 'https://cdn.bootcdn.net/ajax/libs/vue/2.5.18/vue.esm.browser.js'
console.log(Vue)
报错 Uncaught SyntaxError: Cannot use import statement outside a module
<script> - HTML（超文本标记语言） | MDN
如果type属性为module，代码会被当作JavaScript模块 。
index.html
<script type='module' src="./main.js"></script>
成功打印出了Vue构造器
进一步？
能否像在日常开发中那样写代码，如
import Vue from 'vue'
没有npm，没有node_modules，通过网络资源加载
此时要用上 Import maps
<script type="importmap">
{
"imports": {
"vue": "https://cdn.bootcdn.net/ajax/libs/vue/2.5.18/vue.esm.browser.js",
}
}
</script>
但浏览器不太支持～
此时system.js上场
根据 Javascript Tutorial: SystemJS intro 介绍，System.js 的特性有
1 polyfill for import maps
2 one file with multiple modules (one network) (System.set System.register)
3 able to look at all the javascript modules right now (System.get System.has)
4 import.meta.resolve
5 import.meta.url give you the url of the current file (when we are inside of)
6 surport JSON HTML CSS modules in browser javascript modules
使用
index.html
<script type="systemjs-importmap">
{
"imports": {
"vue": "https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"
}
}
</script>
<body>
<script type="systemjs-module" src="./main.js"></script>
<div id="container">
{{date}}
</div>
<script src='https://cdn.jsdelivr.net/npm/systemjs/dist/system.js'></script>
</body>
main.js
const vue = System.import("vue").then(e => {
const Vue = e.default
new Vue({
el: '#container',
data :{
date: '2021'
}
})
})
