javascript - 导入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) 以正确的顺序包含它。