阐:ES6模块的使用

205 阅读1分钟

ES6模块化

对于ES6的模块化使用,首先需要配置一下运行环境,否则在初始的环境下ES6是运行不起来的

在nodejs中搭建学习es6模块化的环境

首先在文件夹中初始化 npm init --yes                                                     

在 package.json 的根节点中添加 "type": "module"节点

操作

整体导出

image.png

单个导出

image.png

导入导出使用别名

导入使用别名

image.png

导出使用别名

image.png

整体导入

image.png

注意,直接写import obj from './tool.js'会报错。

默认导出

image.png

obj可以改成其他名字。

默认导出和整体导出一起使用

image.png

默认导出和整体导出合着写

image.png

注意:花括号不能在前面

总结

在tool.js中导出方式在index.js中导入
export let name=''; export function f=function()import {name,f} from './tool.js'正确
export {name,f}import {name,f} from './tool.js'正确
export default {name,f}import obj from './tool.js'正确
export { name, f}import obj from './tool.js'错误
export {name,f}; export default {version};import obj, {name,f} from './a.js'正确

让chrome浏览器支持es6模块化

1.打开chrome浏览器,在地址栏中输入 chrome://flags; 找到experimental javascript,启用它;最后重启chrome浏览器。

2.修改index.html中引入.js 的方式

<html lang="zh">
  <script type="module" src="./index.js"></script> 
</html>