我目前正在使用带有 React js 的 webpack。我是新手,对导入依赖项有疑问。传统方式,我们通常从<script>
导入第三方库在 html 中标记。现在我可以通过运行下面的代码在 javascript 中完成它。我想知道这两种方法之间的区别是什么。它们是否被导入到同一个命名空间?还有什么区别吗?
import $ from 'jquery'
import React from 'react';
import ReactDOM from 'react-dom';
import load from 'little-loader';
最佳答案
您会注意到 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) 以正确的顺序包含它。
关于javascript - 导入js库和在html <script>标签中引用有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36562614/