ES6 导入 npm 模块

Question

ES6 导入 npm 模块

Luk*_*asz 7 javascript node.js es6-modules

我正在开始进行 Web 开发，但在将我安装的模块导入npm i MODULE -S到我.html的script. 我的文件结构类似于：

设置：

    project
    |_ node_modules
    |_ public
    |   |_ css
    |   |_ js
    |   |   |_ libs
    |   |   |_ index.mjs
    |   |_ index.html
    |_ server
        |_ server.mjs

Run Code Online (Sandbox Code Playgroud)

该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>

Run Code Online (Sandbox Code Playgroud)

和index.mjs文件：

import $ from 'jquery';

Run Code Online (Sandbox Code Playgroud)

为了保证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}`);
});

Run Code Online (Sandbox Code Playgroud)

问题

当我运行node --experimental-modules server/server.mjs页面加载时，我可以在中访问它localhost:8080，但是当我在 chrome 中打开开发人员工具时，出现以下错误：

Uncaught TypeError: Failed to resolve module specifier "jquery". Relative references must start with either "/", "./", or "../".

Run Code Online (Sandbox Code Playgroud)

尝试解决

1）我已将文件中的导入语句更改index.mjs为：

import $ from '.jquery';

import $ from './jquery';

'import $ from '../../node_modules/jquery';

Run Code Online (Sandbox Code Playgroud)

输出以下消息：

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)

Run Code Online (Sandbox Code Playgroud)

2）我尝试将文件jquery夹从node_modules目录复制到libs目录中并重新运行，以便index.js只有以下代码：

import $ from './libs/jquery';

Run Code Online (Sandbox Code Playgroud)

但我收到以下错误：

GET http://localhost:49160/js/libs/jquery/ net::ERR_ABORTED 404 (Not Found)

Run Code Online (Sandbox Code Playgroud)

额外的

当我按照Mozilla 开发人员页面上的文档开发自己的模块时，一切正常，但是当我尝试使用第三方模块时，我遇到了一系列错误。

Answer 1

小智 1

太长了；

import $ from '/js/libs/jquery/dist/jquery.js'

或者

import $ from './libs/jquery/dist/jquery.js'

您的两次尝试中有两个不同的问题。

import $ from 'jquery';

这种按名称导入将不起作用，因为您的浏览器不知道在哪里搜索 jquery。根据浏览器的不同，如果jquery.js您的服务器的根目录 (/public) 中有一个文件，它可能会起作用，但不能保证。

从'.jquery'导入$；

从'./jquery'导入$；

'从'../../node_modules/jquery'导入$；

不幸的是，这些都是错误的道路。ES6 模块是从文件加载的，而不是从目录加载的，并且 package.json 会被忽略。因此，所有这些dist/jquery.js最终都需要有机会。另外，根据您的目录结构，没有一个是正确的（假设 jquery dir 位于 /public/js/libs 中）。./libs第二个是结尾，但在开头缺失。

归档时间：	6 年，11 月前
查看次数：	15271 次
最近记录：	5 年，2 月前