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-browser.js。

https://unpkg.com/vue@3.3.4/dist/vue.esm-browser.js