导入js库或在html <script>标签中引用它有啥区别

Posted 2023-02-22

【中文标题】导入js库或在html <script>标签中引用它有啥区别

【英文标题】：What is the difference between importing js library or reference it in html <script> tag导入js库或在html <script>标签中引用它有什么区别

【发布时间】：2016-08-02 10:28:59

【问题描述】：

我目前正在使用带有 react js 的 webpack。我是新手，对导入依赖项有疑问。传统方式，我们通常从html中的<script>标签导入第三方库。现在我可以通过运行下面的代码在 javascript 中做到这一点。我想知道这两种方法之间的区别是什么。它们是否被导入同一个命名空间？还有其他区别吗？

import $ from 'jquery'
import React from 'react';
import ReactDOM from 'react-dom';
import load from 'little-loader';

【问题讨论】：

这是一个你可以通过一些战术谷歌搜索可能找到的东西。 exploringjs.com/es6/ch_modules.html

听起来你对webpack的核心用例有疑问。它只允许您导入模块，并且范围在您进行导入的任何地方都是本地的。如果你想让一些东西全球化，你会做import $ from 'jquery'; window.$ = $; 但是你应该使用模块而不是使用全局命名空间。

好的，谢谢你的解释。

【参考方案1】：

你会注意到 Webpack 会生成一个 JS 文件，该文件 通过 <script> 标签包含在其中。这是“捆绑”文件。页面上总是有一个<script> 标签。

什么 Webpack/Browserify/等。做，他们是否需要几个不同的 JS 文件并将它们组合成一个 JS 文件以通过 <script> 标签加载。所以这个：

<script src="jquery.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>

...变成这样：

<script src="bundle.js" type="text/javascript"></script>

jQuery 和你所有的app.js 代码现在都在bundle.js 文件中。 Webpack 还将确保一切都按正确的顺序运行，以便 jQuery 在 app.js 代码之前运行。这就是为什么你有这条线：

import $ from 'jquery'

...或在 ECMAScript 5 中：

var $ = require('jquery');

这告诉打包器您依赖 jQuery，因此它可以确保它 1) 被包含和 2) 以正确的顺序包含。