ES6 導入 npm 模塊

Question

我開始進行 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 開發人員頁面上的文檔並開發我自己的模塊時，一切正常，但是當我嘗試使用第三方模塊時，我遇到了一系列錯誤。

Answer 1

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 。

Answer 2

正確的導入是

import * as $ from 'jquery';

Answer 3

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

ES6 導入 npm 模塊

問題描述

3 個解決方案

解決方案1
1 已采納 2019-04-15 14:22:50

解決方案2
0 2019-02-11 00:57:05

解決方案3
0 2020-11-02 21:21:46

ES6 導入 npm 模塊

問題描述

3 個解決方案

解決方案1 1 已采納 2019-04-15 14:22:50

解決方案2 0 2019-02-11 00:57:05

解決方案3 0 2020-11-02 21:21:46

解決方案1
1 已采納 2019-04-15 14:22:50

解決方案2
0 2019-02-11 00:57:05

解決方案3
0 2020-11-02 21:21:46