浏览器中使用es6模块化_立即在浏览器中使用ES模块

最新推荐文章于 2024-04-23 10:56:00 发布

dingshi7798

最新推荐文章于 2024-04-23 10:56:00 发布

阅读量1.7k

点赞数

文章标签：网络 java python javascript linux ViewUI

原文链接：https://www.sitepoint.com/using-es-modules/

版权

浏览器中使用es6模块化

本文将向您展示如何在当今的浏览器中使用ES模块。

直到最近，JavaScript还没有模块的概念。无法直接引用一个JavaScript文件或将其包含在另一个JavaScript文件中。随着应用程序的规模和复杂性的增长，这使得为浏览器编写JavaScript变得棘手。

一种常见的解决方案是使用<script>标记在网页中加载任意脚本。但是，这带来了自己的问题。例如，每个脚本都会启动一个阻止渲染的HTTP请求，这可能会使JS繁重的页面显得迟钝且缓慢。依赖管理也变得很复杂，因为加载顺序很重要。

ES6（ES2015）通过引入单个本机模块标准来解决这种情况。（您可以在这里阅读更多关于ES6模块的信息。）但是，由于浏览器最初对ES6模块的支持很差，人们开始使用模块加载器将依赖项捆绑到单个ES5跨浏览器兼容的文件中。此过程介绍了自己的问题和复杂程度。

但是，好消息即将到来。浏览器支持变得越来越好，因此让我们看一下如何在当今的浏览器中使用ES6模块。

Safari，Chrome，Firefox和Edge均支持ES6模块导入语法。这是他们的样子。

<script type="module">
  import { tag } from './html.js'

  const h1 = tag('h1', '👋 Hello Modules!')
  document.body.appendChild(h1)
</script>

// html.js
export function tag (tag, text) {
  const el = document.createElement(tag)
  el.textContent = text

  return el
}

或作为外部脚本：

<script type="module" src="app.js"></script>

// app.js
import { tag } from './html.js'

const h1 =

关注