[英]ES6 Importing npm module
我开始进行 Web 开发,但在将使用npm i MODULE -S
安装的npm i MODULE -S
导入到script
的 my .html
遇到了问题。 我的文件结构类似于:
设置:
project
|_ node_modules
|_ public
| |_ css
| |_ js
| | |_ libs
| | |_ index.mjs
| |_ index.html
|_ server
|_ server.mjs
index.html
文件非常简单,类似于:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JSON and AJAX</title>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
</head>
<body>
<header>
<h1>JSON and AJAX</h1>
<button id="btn">Fetch Info for 3 New Objects</button>
</header>
<div id="animal-info"></div>
<script type="module" src="js/index.mjs"></script>
<div id="msgid"></div>
</body>
</html>
和index.mjs
文件:
import $ from 'jquery';
和完整的server.mjs
文件
// const path = require('path');
import path from 'path';
import express from 'express';
const app = express();
const __dirname = path.resolve();
const publicPath = path.join(__dirname, '/public');
app.use(express.static(publicPath));
const port = process.env.PORT || 8080;
app.set('port', port);
app.listen(app.get('port'), () => {
console.log(`listening on port ${port}`);
});
问题
当我运行node --experimental-modules server/server.mjs
我的页面加载并且我可以在localhost:8080
访问它,但是当我在 chrome 中打开开发人员工具时,我遇到了以下错误:
Uncaught TypeError: Failed to resolve module specifier "jquery". Relative references must start with either "/", "./", or "../".
尝试解决
1)我已将index.mjs
文件中的 import 语句更改为:
import $ from '.jquery';
import $ from './jquery';
'import $ from '../../node_modules/jquery';
输出以下消息:
GET http://localhost:49160/js/jquery net::ERR_ABORTED 404 (Not Found)
GET http://localhost:49160/js/jquery net::ERR_ABORTED 404 (Not Found)
GET http://localhost:49160/node_modules/jquery net::ERR_ABORTED 404 (Not Found)
2)我试图将jquery
文件夹从node_modules
目录复制到libs
目录并重新运行,以便index.js
只有以下代码:
import $ from './libs/jquery';
但我收到以下错误:
GET http://localhost:49160/js/libs/jquery/ net::ERR_ABORTED 404 (Not Found)
额外的
当我遵循Mozilla 开发人员页面上的文档并开发我自己的模块时,一切正常,但是当我尝试使用第三方模块时,我遇到了一系列错误。
TLDR;
import $ from '/js/libs/jquery/dist/jquery.js'
或者
import $ from './libs/jquery/dist/jquery.js'
您的两次尝试有两个不同的问题。
import $ from 'jquery';
这种按名称导入将不起作用,因为您的浏览器不知道在哪里搜索 jquery。 根据浏览器的不同,如果您的服务器的根目录 (/public) 中有jquery.js
文件,它可能会起作用,但不能保证。
从'.jquery'导入$;
从'./jquery'导入$;
'从'../../node_modules/jquery'导入$;
不幸的是,这些都是错误的路径。 ES6 模块从文件加载,而不是从目录加载,并且 package.json 被忽略。 所以所有这些最终都需要dist/jquery.js
才有机会。 此外,根据您的目录结构,没有一个是正确的(假设 jquery 目录在 /public/js/libs 中)。 第二个是 closes 但在开头缺少./libs
。
正确的导入是
import * as $ from 'jquery';
CDN
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
NPM型安装
npm install @types/jquery --save-dev
打字稿参考
/// <reference types="jquery" />
关键是要意识到,jQuery 可以通过全局范围访问https://www.typescriptlang.org/docs/handbook/declaration-files/library-structures.html#global-libraries
并且可以通过reference
关键字而不是import
来reference
https://www.typescriptlang.org/docs/handbook/declaration-files/library-structures.html#dependencies-on-global-libraries
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.