怎么让原生的js文件支持import
时间: 2024-03-06 16:46:38 浏览: 33
原生的 JavaScript 文件默认不支持 import,需要使用一些工具来实现模块化。在浏览器端,可以使用打包工具(如 webpack、Rollup 等)将多个 JavaScript 文件打包成一个文件,并通过在 HTML 文件中引入打包后的文件来实现模块化。在 Node.js 环境中,支持使用 CommonJS 规范来进行模块化,可以使用 require() 函数来导入模块,使用 module.exports 来导出模块。
但是,如果你想使用原生的 JavaScript 文件来实现模块化,可以使用浏览器中内置的模块加载器——<script type="module">。这种方式可以在浏览器中直接使用 import 和 export,但是需要注意以下几点:
1. 该方式只在支持 ES6 模块的浏览器中才能使用;
2. 需要在 HTML 文件中使用 type="module" 声明脚本类型;
3. 该方式会将每个模块都加载到单独的作用域中,因此需要注意变量的作用范围。
示例如下:
```
// file1.js
export const myVar = "Hello, world!";
// file2.js
import { myVar } from './file1.js';
console.log(myVar);
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Module Test</title>
</head>
<body>
<script type="module" src="./file2.js"></script>
</body>
</html>
```
在浏览器中打开 index.html 文件,可以看到控制台输出了 "Hello, world!"。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)