javascript - How could I import jQuery from npm package using ES6 only? - Stack Overflow

admin管理员组

文章数量:1335357

I installed jQuery with npm -install jquery and it created a node_modules folder in my project with jquery in it. But when I try to import it using ES6 import it gives me an error.

I don't want to use Webpack or require() and have to pile it... anything else just plain vanilla ES6.

I'm always gettting this error

Uncaught SyntaxError: The requested module './node_modules/jquery/dist/jquery.min.js' does not provide an export named '$'

or

Uncaught SyntaxError: The requested module './node_modules/jquery/src/jquery.js' does not provide an export named '$'

Project structure

.
├── index.html
├── app.js
├── node_modules/
│   ├── jquery/
│   │   ├── dist/
│   │   │   ├── jquery.js
│   │   │   ├── jquery.min.js
│   │   ├── src/
│   │   │   ├── jquery.js
└── package.json

app.js

import { $ } from './node_modules/jquery/dist/jquery.min.js'; // <-- does not work
import { $ } from './node_modules/jquery/src/jquery.js'; // <-- does not work
window.$ = $;

$('body').css('background-color', 'red')

I installed jQuery with npm -install jquery and it created a node_modules folder in my project with jquery in it. But when I try to import it using ES6 import it gives me an error.

I don't want to use Webpack or require() and have to pile it... anything else just plain vanilla ES6.

I'm always gettting this error

Uncaught SyntaxError: The requested module './node_modules/jquery/dist/jquery.min.js' does not provide an export named '$'

or

Uncaught SyntaxError: The requested module './node_modules/jquery/src/jquery.js' does not provide an export named '$'

Project structure

.
├── index.html
├── app.js
├── node_modules/
│   ├── jquery/
│   │   ├── dist/
│   │   │   ├── jquery.js
│   │   │   ├── jquery.min.js
│   │   ├── src/
│   │   │   ├── jquery.js
└── package.json

app.js

import { $ } from './node_modules/jquery/dist/jquery.min.js'; // <-- does not work
import { $ } from './node_modules/jquery/src/jquery.js'; // <-- does not work
window.$ = $;

$('body').css('background-color', 'red')

• javascript
• jquery
• npm

Share Improve this question Follow edited Feb 8, 2019 at 13:21 Liga asked Feb 8, 2019 at 13:15 LigaLiga 3,43966 gold badges3838 silver badges6767 bronze badges 15

• But wait. jQuery is a client-side library, are you trying to import it in Node? And then use it in Node with $('body').css()? What am I missing? – Jeremy Thille Commented Feb 8, 2019 at 13:18
• No, I just wanted to use npm as a package manager and include it in browser. – Liga Commented Feb 8, 2019 at 13:20
• So what's wrong with <script src="jquery.js"> ? – Jeremy Thille Commented Feb 8, 2019 at 13:21
• 1 And try $ instead of { $ }. – Nenad Vracar Commented Feb 8, 2019 at 13:28
• 5 Just import './node_modules/jquery/dist/jquery.min.js' works for me. – Nenad Vracar Commented Feb 8, 2019 at 13:31

 |  Show 10 more ments

2 Answers 2

Sorted by: Reset to default 2

Try npm install jquery and then import $ from "jquery".

At the moment, this functionality is only beginning to be supported by browsers. Full implementation is provided in many transpilers such as TypeScript and Babel, and bundlers such as Webpack.

ES6 modules have been fully supported in Chrome since version 65 but it still throws errors if we try and use the import/export keywords to import or export modules in JavaScript files.

So what do you have to do to make ES6 modules work without Webpack/Browserify/Babel is to add next script tag in your index.html file:

<script type="module" src="ES6-Node.js"></script>

本文标签： javascriptHow could I import jQuery from npm package using ES6 onlyStack Overflow