为什么建议大家使用Linux开发？

十四、构建工具

在实际开发中，浏览器模块很少被以“原始”形式进行使用。通常，我们会使用一些特殊工具，例如 Webpack，将它们打包在一起，然后部署到生产环境的服务器。

使用打包工具的一个好处是 —— 它们可以更好地控制模块的解析方式，允许我们使用裸模块和更多的功能，例如 CSS/HTML 模块等。

构建工具做以下这些事儿：

1. 从一个打算放在 HTML 中的 <script type="module"> “主”模块开始。
2. 分析它的依赖：它的导入，以及它的导入的导入等。
3. 使用所有模块构建一个文件（或者多个文件，这是可调的），并用打包函数（bundler function）替代原生的 import 调用，以使其正常工作。还支持像 HTML/CSS 模块等“特殊”的模块类型。
4. 在处理过程中，可能会应用其他转换和优化：删除无法访问的代码。删除未使用的导出（“tree-shaking”）。删除特定于开发的像 console 和 debugger 这样的语句。可以使用 Babel 将前沿的现代的 JavaScript 语法转换为具有类似功能的旧的 JavaScript 语法。压缩生成的文件（删除空格，用短的名字替换变量等）。

如果我们使用打包工具，那么脚本会被打包进一个单一文件（或者几个文件），在这些脚本中的 import/export 语句会被替换成特殊的打包函数（bundler function）。因此，最终打包好的脚本中不包含任何 import/export，它也不需要 type="module"，我们可以将其放入常规的 <script>：
 

十一、外部脚本

具有 type="module" 的外部脚本(external script)在两个方面有所不同：

1. 具有相同 src 的外部脚本仅运行一次：<!-- 脚本 my.js 被加载完成（fetched）并只被运行一次 --> <script type="module" src="my.js"></script> <script type="module" src="my.js"></script>
2. 从另一个源（例如另一个网站）获取的外部脚本需要 CORS header，如我们在 Fetch：跨源请求 一章中所讲的那样。换句话说，如果一个模块脚本是从另一个源获取的，则远程服务器必须提供表示允许获取的 header Access-Control-Allow-Origin。<!-- another-site.com 必须提供 Access-Control-Allow-Origin --> <!-- 否则，脚本将无法执行 --> <script type="module" src="http://another-site.com/their.js"></script>默认这样做可以确保更好的安全性。

十二、不允许裸模块(“bare” module)

在浏览器中，import 必须给出相对或绝对的 URL 路径。没有任何路径的模块被称为“裸(bare)”模块。在 import 中不允许这种模块。

例如，下面这个 import 是无效的：
 

请注意：上面的第二个脚本实际上要先于前一个脚本运行!所以我们会先看到 undefined，然后才是 object。

这是因为模块脚本是被延迟的，所以要等到 HTML 文档被处理完成才会执行它。而常规脚本则会立即运行，所以我们会先看到常规脚本的输出。

当使用模块脚本时，我们应该知道 HTML 页面在加载时就会显示出来，在 HTML 页面加载完成后才会执行 JavaScript 模块，因此用户可能会在 JavaScript 应用程序准备好之前看到该页面。某些功能那时可能还无法正使用。我们应该放置“加载指示器(loading indicator)”，否则，请确保不会使用户感到困惑。

十、Async 适用于内联脚本(inline script)

对于非模块脚本，async 特性(attribute)仅适用于外部脚本。异步脚本会在准备好后立即运行，独立于其他脚本或 HTML 文档。

对于模块脚本，它也适用于内联脚本。

例如，下面的内联脚本具有 async 特性，因此它不会等待任何东西。

它执行导入(fetch ./analytics.js)，并在准备导入完成时运行，即使 HTML 文档还未完成，或者其他脚本仍在等待处理中。

这对于不依赖任何其他东西的功能来说是非常棒的，例如计数器，广告，文档级事件监听器。

（编辑：鞍山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!