ES6模块化
对于ES6的模块化使用,首先需要配置一下运行环境,否则在初始的环境下ES6是运行不起来的
在nodejs中搭建学习es6模块化的环境
首先在文件夹中初始化 npm init --yes
在 package.json 的根节点中添加 "type": "module"节点
操作
整体导出
单个导出
导入导出使用别名
导入使用别名
导出使用别名
整体导入
注意,直接写import obj from './tool.js'会报错。
默认导出
obj可以改成其他名字。
默认导出和整体导出一起使用
默认导出和整体导出合着写
注意:花括号不能在前面
总结
| 在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>