ES6模块化开发问题大全
ES6模块化开发 Uncaught TypeError
加载规则
浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module" 属性
<script type="module" src="./xxx.js"></script>
问题1
缺少type="module"
<script >
// 导入依赖
import $ from './js/jquery-3.6.0.min.js';
consoel.log( $ );
</script>
Uncaught SyntaxError:
import declarations may only appear at top level of a module
问题2
解析很明确就是固定格式开头。相关模块说明符必须以“./”, “…/”或 “/”开头。
Uncaught SyntaxError:
解析模块说明符“js/jquery-3.6.0.min.js”时出错。相关模块说明符必须以“./”, “../”或 “/”开头。
<script type="module" >
// 导入依赖
import $ from 'js/jquery-3.6.0.min.js';
consoel.log( $ );
</script>
问题3
模块的整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（ * ）指定一个对象，所有输出值都加载在这个对象上面。
Uncaught SyntaxError: import not found: default
<script type="module">
import * as $ from './js/jquery-3.6.0.min.js';
console.log( $ );
</script>
Object { … }
Symbol(Symbol.toStringTag): "Module"
问题4
在上述操作上给界面渲染数据 又出现新的问题
<div id="app"></div>
$('#app').text('Hi from jQuery!');
Uncaught TypeError:
$ is not a function
注意
Vue 默认的 vue.js 是 UMD 的，不适用于 ES Module 环境。你需要引入 vue.esm.js。