活久见：原来 Chrome 浏览器支持 Import from 语法

最新推荐文章于 2025-02-17 17:02:54 发布

weixin_34162228

最新推荐文章于 2025-02-17 17:02:54 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

文章标签：运维

原文链接：http://www.cnblogs.com/CyLee/p/10158883.html

本文详细介绍了如何使用ES6模块系统进行代码的组织与管理，包括在高版本Chrome中使用模块导入导出功能的方法，以及在服务器环境下运行模块化代码的必要条件。通过具体示例展示了HTML文件中引入模块化JS代码的过程。

需要满足以下三个条件：

1、高版本的Chrome ，总而言之越新越好……，其他浏览器请参考：https://caniuse.com/#search=import

2、必须在服务器环境下才能运行，譬如apache或者nginx，或者大部分语言都能开启的服务环境（我这里用phpstudy的Nginx环境来测试）

3、需要在 script 中加入 type = 'module'

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app"></div>
</body>
<script type='module'>
    import test from './test.js'
    console.log(20181221204836, test) // {a: 123 } 
</script>
</html>