时间戳

首页 > 解决方案 > 导入我的 CSS 文件导致我的 jquery 未定义（ReferenceError）

javascript - 导入我的 CSS 文件导致我的 jquery 未定义（ReferenceError）

问题描述

我已经开始学习 webpack 并创建了一个小项目来看看它是如何工作的。我正在关注本教程。

我有一个 .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 停止工作？

标签： javascriptjquerywebpack

解决方案

在 JavaScript 世界中，你听说过这些行话：

  • IIFE
  • CommonJS
  • AMD（异步模块定义）
  • UMD（通用模块定义）
  • ESM（ECMAScript 模块或 ES6 模块语法）

这些都是具有不同语法或样式的模式，可以将一个或多个.js文件（也称为模块）放入另一个文件并使用其功能。

但是每种模式都有更多的功能并且与其他模式不同。

您可以在此链接上阅读有关每种模式的更多信息。

您应该知道NodeJS使用CommonJS有助于为 Web 服务器、桌面和命令行应用程序定义特定 API 的标准。

因为NodeJS是为服务器设计的，而不是为浏览器设计的。

所以我们使用CommonJS标准来获取我们的jQuery文件并且只为浏览器工作。

window是浏览器的全局对象而不是服务器，因此在幕后CommonJS模式获取我们的模块并使用别名或jQuery附加到浏览器上。$jQuery

这就是您的浏览器没有抛出异常的原因。

整个场景的一句话就是：
浏览器请使用NodeJS服务器API。

使用 CommonJS 获取模块的语法：

window.$ = window.jQuery = require('jquery');

请记住，ESM获取模块的语法也会转换为CommonJS模式。

在此链接上阅读更多信息。

使用 ESM（ECMAScript 模块或 ES6 模块语法）获取模块：

import $ from 'jquery';
window.$ = window.jQuery = $;

推荐阅读