ES6 Импорт модуля npm - PullRequest
Новая
       7

ES6 Импорт модуля npm

0 голосов
/ 11 февраля 2019

Я только начинаю заниматься веб-разработкой, и у меня возникают проблемы при импорте модулей, которые я установил с помощью npm i MODULE -S, в мой .html в script.Моя файловая структура напоминает:

НАСТРОЙКА: 

    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 $ 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)

EXTRA

Когда я следую документации на странице Mozilla для разработчиков и разрабатываю свои собственные модули, все работает отлично, но когда я пытаюсь с модулями третьей стороны, я получаю ряд ошибок.

Ответы [ 2 ]

0 голосов
/ 15 апреля 2019

TLDR;

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

или

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

В двух ваших попытках возникли две разные проблемы.

import $ from 'jquery';

Этот вид импорта по имени не будет работать, поскольку ваш браузер не знает, где искать jquery.В зависимости от браузера, если у вас есть файл jquery.js в корневом каталоге (/ public) вашего сервера, он может работать, но никаких гарантий.

import $ from'.jquery';

import $ from './jquery';

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

Это все, к сожалению, неправильный путь.Модули ES6 загружаются из файла, а не из каталога, а package.json игнорируется.Таким образом, все это должно было бы dist/jquery.js в конце, чтобы иметь шанс.Кроме того, в зависимости от вашей структуры каталогов, ни одна из них не верна (при условии, что jquery dir находится в / public / js / libs).Второй - закрытие, но в начале не хватает ./libs.

0 голосов
/ 11 февраля 2019

Правильный импорт 

import * as $ from 'jquery';
...