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

Question

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

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

Answer 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) 以正确的顺序包含。