chrome中直接使用import

最新推荐文章于 2023-03-28 16:47:00 发布

赵天明

最新推荐文章于 2023-03-28 16:47:00 发布

阅读量4.9k

点赞数 3

分类专栏： javascript

本文链接：https://blog.csdn.net/guzhao593/article/details/93353963

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

现在我们在开发项目时都是基于构建工具（像webpack）上进行开发，所以在使用import时得心应手。
但今天在chrome中直接使用import时，发现不知道如何使用？

chrome中直接使用import

三个条件：

浏览器版本需要支持，浏览器的支持情况：
使用<script type="module">
必须在服务器环境下才运行（可以通过全局下载npm包http-server来快速启动本地服务器）

注意：引入路径不能省略文件后缀（这个与在构建工具中不同，因为构建工具会自动帮我们找文件）

实践

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'
        document.querySelector('#app').innerHTML = test.a
    </script>
</html>

test.js

export default {
    a: 'test'
}

启用服务器

在这里插入图片描述

运行效果

在这里插入图片描述

赵天明

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
chrome中直接使用import

现在我们在开发项目时都是基于构建工具（像webpack）上进行开发，所以在使用import时得心应手。但今天在chrome中直接使用import时，发现不知道如何使用？chrome中直接使用import三个条件：浏览器版本需要支持，浏览器的支持情况：使用<script type="module">必须在服务器环境下才运行（可以通过全局下载npm包http-...
复制链接

扫一扫