ES6 Importing npm module

Question

I'm getting started with web development and am having trouble importing modules that I've installed using npm i MODULE -S into a my .html within a script . My file structure resembles:

SETUP:

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

the index.html file is very simple and resembles:

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

and the index.mjs file:

import $ from 'jquery';

and for completness the server.mjs file

// 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}`);
});

PROBELM

when I run node --experimental-modules server/server.mjs my page loads and I'm able to visit it in localhost:8080 , but when I open the developer tools in chrome I'm presented with the following error:

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

Attempted resolution

1) I've changed to import statement in the index.mjs file to be:

import $ from '.jquery';

import $ from './jquery';

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

which output the following message:

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) I've attempted to copy the the jquery folder from the node_modules directory into the libs directory and rerun so that index.js only has the following code:

import $ from './libs/jquery';

but I get the following error:

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

EXTRA

When I follow the documentation on the Mozilla developer page and develop my own modules everything works fine, but when I try with thrid party modules I am presented with a series of errors.

Answer 1

TLDR;

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

or

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

There are two different problems in your two attempts.

import $ from 'jquery';

This sort of import by name will not work because your browser doesn't know where to search for jquery. Depending on the browser, if you have a jquery.js file in the root (/public) of your server, it might work, but no guarantees.

import $ from '.jquery';

import $ from './jquery';

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

These are all, unfortunately, the wrong path. ES6 modules are loaded from the file, not from a directory, and package.json is ignored. So all of these would need dist/jquery.js on the end to stand a chance. Also, based on your directory structure, none are correct (assuming jquery dir is in /public/js/libs). The second one is the closes but is missing ./libs at the beginning.

Answer 2

正确的导入是

import * as $ from 'jquery';

Answer 3

CDN

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

NPM type installation

npm install @types/jquery --save-dev

TypeScript reference

/// <reference types="jquery" />

The key is to realize, that jQuery is accessible through global scope https://www.typescriptlang.org/docs/handbook/declaration-files/library-structures.html#global-libraries

and can be referenced via reference keyword instead of import https://www.typescriptlang.org/docs/handbook/declaration-files/library-structures.html#dependencies-on-global-libraries

ES6 Importing npm module

Question

3 answers

solution1
1 ACCPTED 2019-04-15 14:22:50

solution2
0 2019-02-11 00:57:05

solution3
0 2020-11-02 21:21:46

ES6 Importing npm module

Question

3 answers

solution1 1 ACCPTED 2019-04-15 14:22:50

solution2 0 2019-02-11 00:57:05

solution3 0 2020-11-02 21:21:46

solution1
1 ACCPTED 2019-04-15 14:22:50

solution2
0 2019-02-11 00:57:05

solution3
0 2020-11-02 21:21:46