我已经开始学习 webpack 并创建了一个小项目来看看它是如何工作的。我正在关注this教程。
我有一个 .js 文件，我将其与 webpack 捆绑在一起，并使用函数和 jquery 显示一些文本。我遇到的一个问题是这个。
使用这个 .js 文件
$ = require('jquery');
require('./dependentscript');
//import '../css/TestSheet.css';
document.getElementById("fillme").innerHTML = myfunction();
$('#fillmewithquery').html('This is some jquery text');
和Index.html
<body>
<h1>Entry point</h1>
<p id="fillme"></p>
<div id="fillmewithquery"></div>
<script src="~/js/bundle.js"></script>
</body>
这给了我我想要的。
但是当我取消注释我的 import TestSheet.css 时，我得到了这个。
为什么我的一些 .js 文件可以正常工作，而 jquery 却停止工作？
最佳答案
在 JavaScript 世界中，您一定听过这些行话:
- IIFE
- CommonJS
- AMD(异步模块定义)
- UMD(通用模块定义)
- ESM(ECMAScript 模块或 ES6 模块语法)
这些都是具有不同语法或样式的模式，用于将一个或多个 .js 文件(也称为模块) 放入另一个文件并使用其功能.
但是每种模式都有更多的功能并且与其他模式不同。
您可以在 link 上阅读有关每种模式的更多信息。 .
您应该知道 NodeJS 使用 CommonJS 标准，该标准有助于为 Web 服务器、桌面和命令行应用程序定义特定的 API。
因为 NodeJS 是为服务器而不是浏览器设计的。
因此，我们使用 CommonJS 标准来获取 jQuery 文件，并且仅适用于浏览器。
window 是浏览器的全局对象，而不是服务器的全局对象，因此在幕后 CommonJS 模式获取我们的 jQuery 模块并附加到具有别名 $ 或 jQuery 的浏览器。
这就是您的浏览器没有抛出异常的原因。
整个场景的一行语句是:
请使用浏览器的 NodeJS 服务器 API。
使用 CommonJS 获取模块的语法:
window.$ = window.jQuery = require('jquery');
请记住，获取模块的 ESM 语法也会转换为 CommonJS 模式。
了解更多相关内容 link .
使用ESM(ECMAScript模块或ES6模块语法)获取模块:
import $ from 'jquery';
window.$ = window.jQuery = $;
关于javascript - 导入我的 CSS 文件导致我的 jquery 未定义(ReferenceError)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55297815/