Làm cách nào để nhập jquery bằng cú pháp ES6?

128

Tôi đang viết một ứng dụng mới bằng ES6cú pháp (JavaScript) thông qua trình babelchuyển tiếp và các preset-es2015plugin, cũng như semantic-uicho kiểu.

index.js

import * as stylesheet from '../assets/styles/app.scss';
import * as jquery2 from '../dist/scripts/jquery.min';
import * as jquery3 from '../node_modules/jquery/dist/jquery.min';

console.log($('my-app'));

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
<body>
<script src="dist/app.js"></script>
</body>
</html>

Cấu trúc dự án

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

package.json

  …
  "scripts": {
    "build:app": "browserify -e ./app/index.js -o ./dist/app.js",
    "copy:jquery": "cpy 'node_modules/jquery/dist/jquery.min.js' ./dist/scripts/",
    …
  },
  "devDependencies": {
    "babel-core": "6.3.x",
    "babel-preset-es2015": "6.3.x",
    "babelify": "7.2.x",
    "cpy": "3.4.x",
    "npm-run-all": "1.4.x",
    "sassify": "0.9.x",
    "semantic-ui": "2.1.x",
    …
  },
  "browserify": {
    "transform": [
      [ "babelify", { "presets": [ "es2015"]}],
      [ "sassify", { "auto-inject": true}]
    ]
  }

Câu hỏi

Sử dụng <script>thẻ cổ điển để nhập jqueryhoạt động tốt, nhưng tôi đang cố gắng sử dụng cú pháp ES6.

  • Làm cách nào để nhập jqueryđể đáp ứng semantic-uibằng cú pháp nhập ES6?
  • Tôi nên nhập từ node_modules/thư mục hay của tôi dist/(nơi tôi sao chép mọi thứ)?
javascript  jquery  ecmascript-6  browserify  semantic-ui 
— Édouard Lopez
nguồn
2
Chà, nhập từ distkhông có ý nghĩa gì vì đó là thư mục phân phối của bạn với ứng dụng sẵn sàng sản xuất. Việc xây dựng ứng dụng của bạn nên lấy những gì bên trong các mô-đun nút và thêm nó vào thư mục dist, bao gồm jQuery.
— nem035,
Cũng không nhập từ tệp scss . Trừ khi có một plugin tuyệt vời nào đó mà tôi đang bỏ lỡ!
— CodingIntrigue
@RGraham nó được gọi là sassify , một plugin duyệt qua. Tôi đang truyền cảm hứng cho bản thân mình từ ý chính oncletom
— Édouard Lopez
Tôi sẽ kiểm tra điều đó, cảm ơn!
— CodingIntrigue
@RGraham - cú pháp có vẻ kỳ quặc, nhưng sử dụng "request" cho các tệp css / sass được khuyến khích với các công cụ xây dựng như webpack + babel. ví dụ. request ("../ node_modules / bootstrap / dist / css / bootstrap.min.css");
— arcseldon

Câu trả lời:

129

index.js

import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;

Đầu tiên, như @nem đã đề xuất trong nhận xét, việc nhập phải được thực hiện từ node_modules/:

Chà, nhập từ dist/không có ý nghĩa gì vì đó là thư mục phân phối của bạn với ứng dụng sẵn sàng sản xuất. Việc xây dựng ứng dụng của bạn nên lấy những gì bên trong node_modules/và thêm nó vào dist/thư mục, bao gồm jQuery.

Tiếp theo, khối cầu - * as- sai vì tôi biết đối tượng tôi đang nhập ( ví dụ jQuery và $), vì vậy một câu lệnh nhập đơn giản sẽ hoạt động.

Cuối cùng, bạn cần hiển thị nó với các tập lệnh khác bằng cách sử dụng window.$ = $.

Sau đó, tôi nhập dưới dạng cả hai $và jQueryđể bao gồm tất cả các cách sử dụng, browserifyloại bỏ trùng lặp nhập, vì vậy không có chi phí ở đây! ^ o ^ y

— Édouard Lopez
nguồn
6
Không chắc nếu bạn vẫn còn xung quanh nhưng bạn có thể giải thích sự cần thiết của window.$ = $. Tôi không hiểu tại sao lại cần điều đó. Các tập lệnh khác sẽ không được tự động đóng gói thành một jstập lệnh duy nhất khi duyệt qua nó có phải là điều kỳ diệu không?
— qarthandso
13
Tại sao không chỉ có import {$,jQuery} from 'jquery';? Tại sao quá nhiều nhập khẩu?
— Jackie
4
Làm thế nào bạn tìm thấy tên lớp chính xác, tức là jQuery?
— Avinash Raj
13
Tôi nhận được Module '"jquery"' has no exported member 'jQuery'hoặc Module '"jquery"' has no default exporttôi còn thiếu gì?
— daslicht
4
Các phiên bản cũ hơn của jQuery không sử dụng các bản xuất có tên. Các phiên bản mới hơn thì có. Phương thức nhập phụ thuộc vào phiên bản jQuery bạn đang sử dụng.
— pmont
55

Dựa trên giải pháp của Édouard Lopez, nhưng theo hai dòng:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
— mưa đá
nguồn
2
Điều này phù hợp với tôi, trong khi cách tiếp cận câu trả lời được chấp nhận thì không ... Tôi đã sử dụng nhiều thứ tương tự: import $ từ 'jquery'; window.jQuery = $; window. $ = $;
— arcseldon
3
một dòng:window.$ = window.jQuery = require('jquery');
— Nabil Baadillah 12/09/17
2
@NabilBaadillah require(CommonJS) không phải import(mô-đun ES) và một lớp lót có vẻ không khả thi với import. (Có người quan tâm?)
— Nicolas Lê Thierry d'Ennequin
14

Nhập toàn bộ nội dung của JQuery trong phạm vi Toàn cầu. Điều này sẽ chèn $ vào phạm vi hiện tại, chứa tất cả các liên kết được xuất từ ​​JQuery.

import * as $ from 'jquery';

Bây giờ $ thuộc về đối tượng cửa sổ.

— ivan hertz
nguồn
1
điều này đã làm việc cho tôi. "Nhập {jQuery dưới dạng $} từ 'jquery';" đưa ra lỗi không tìm thấy "jQuery".
— SpaceMonkey
12

Bạn có thể tạo một trình chuyển đổi mô-đun như dưới đây:

// jquery.module.js
import 'https://code.jquery.com/jquery-3.3.1.min.js'
export default window.jQuery.noConflict(true)

Thao tác này sẽ xóa các biến toàn cục do jQuery giới thiệu và xuất đối tượng jQuery làm mặc định.

Sau đó, sử dụng nó trong tập lệnh của bạn:

// script.js
import $ from "./jquery.module.js";

$(function(){
  $('body').text('youpi!');
});

Đừng quên tải nó dưới dạng một mô-đun trong tài liệu của bạn:

<script type='module' src='./script.js'></script>

http://plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=preview

— Yukulélé
nguồn
1
Điều này đã giúp! Tôi thường muốn thử những điều cơ bản trước khi sử dụng bất kỳ IDE / DevEnv nào. Nếu không sử dụng Node / NPM / Babble, tôi muốn hiểu xuất nhập ES6. Tôi đã quản lý để làm việc xuất nhập khẩu cơ bản nhưng đang gặp khó khăn với việc đưa vào jquery. Tôi đã viết mã tùy chỉnh của mình dưới dạng mô-đun nhưng vẫn tiếp tục tham chiếu đến jquery theo cách truyền thống của nó bằng cách sử dụng thẻ script trong html. Vì vậy, tôi đã kết thúc có 2 thẻ script, một để bao gồm jquery và một để bao gồm app.js. Với câu trả lời của bạn, tôi có thể loại bỏ thẻ tập lệnh jquery đầu tiên của mình và sử dụng jquery.module.js trung gian như bạn đề xuất.
— sidnc86
9

Câu trả lời được chấp nhận không làm việc cho tôi
lưu ý: sử dụng rollup js dont know nếu câu trả lời này thuộc về đây
sau khi
NPM i --save jquery
trong custom.js

import {$, jQuery} from 'jquery';

hoặc là

import {jQuery as $} from 'jquery';

tôi gặp lỗi : Mô-đun ... node_modules / jquery / dist / jquery.js không xuất jQuery
hoặc
Mô-đun ... node_modules / jquery / dist / jquery.js không xuất $
rollup.config.js

export default {
    entry: 'source/custom',
    dest: 'dist/custom.min.js',
    plugins: [
        inject({
            include: '**/*.js',
            exclude: 'node_modules/**',
            jQuery: 'jquery',
            // $: 'jquery'
        }),
        nodeResolve({
            jsnext: true,
        }),
        babel(),
        // uglify({}, minify),
    ],
    external: [],
    format: 'iife', //'cjs'
    moduleName: 'mycustom',
};

thay vì tiêm cuộn lên, đã thử 

commonjs({
   namedExports: {
     // left-hand side can be an absolute path, a path
     // relative to the current directory, or the name
     // of a module in node_modules
     // 'node_modules/jquery/dist/jquery.js': [ '$' ]
     // 'node_modules/jquery/dist/jquery.js': [ 'jQuery' ]
        'jQuery': [ '$' ]
},
format: 'cjs' //'iife'
};

package.json

  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-eslint": "6.1.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-external-helpers": "6.18.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-register": "6.9.0",
    "eslint": "2.12.0",
    "eslint-config-airbnb-base": "3.0.1",
    "eslint-plugin-import": "1.8.1",
    "rollup": "0.33.0",
    "rollup-plugin-babel": "2.6.1",
    "rollup-plugin-commonjs": "3.1.0",
    "rollup-plugin-inject": "^2.0.0",
    "rollup-plugin-node-resolve": "2.0.0",
    "rollup-plugin-uglify": "1.0.1",
    "uglify-js": "2.7.0"
  },
  "scripts": {
    "build": "rollup -c",
  },

Điều này đã hoạt động:
đã loại bỏ các plugin bổ sung cuộn lên và commonjs

import * as jQuery from 'jquery';

sau đó trong custom.js

$(function () {
        console.log('Hello jQuery');
});
— Ritin
nguồn
Có vẻ như namedExportskhông còn tồn tại trong plugin commonjs
— Nicolas Hoizey,
7

Nếu nó giúp ích cho bất kỳ ai, các câu lệnh nhập javascript sẽ được lưu vào. Do đó, nếu một thư viện có phụ thuộc (ví dụ: bootstrap) vào jquery trong không gian tên chung (cửa sổ), điều này sẽ KHÔNG hoạt động:

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
import 'bootstrap/dist/js/bootstrap.min';

Điều này là do quá trình nhập bootstrap được kéo và đánh giá trước khi jQuery được đính kèm vào cửa sổ.

Một cách để giải quyết vấn đề này là không nhập trực tiếp jQuery mà thay vào đó nhập một mô-đun tự nhập jQuery VÀ gắn nó vào cửa sổ.

import jQuery from './util/leaked-jquery';
import 'bootstrap/dist/js/bootstrap.min';

nơi leaked-jqueryvẻ thích

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
export default $;
export jQuery;

EG, https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js

— craigmichaelmartin
nguồn
6

người dùng webpack, hãy thêm phần bên dưới vào pluginsmảng của bạn .

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
— Muhammad Reda
nguồn
4
Điểm chuyên nghiệp của phương pháp này là gì? Vì bạn đang tự ràng buộc mình với công cụ xây dựng của mình ở đây.
— Édouard Lopez
đây là cách duy nhất tôi làm cho nó hoạt động. Tôi đã thử import {$, jQuery} from 'jquery';nhưng id không hoạt động, tôi tin rằng vì nó không được xác định (nhập) trong các mô-đun khác.
— Muhammad Reda
2
Đây là giải pháp tốt nhất cho người dùng webpack vì jQuery nên có sẵn trên toàn cầu trong tất cả các tệp mà không có câu lệnh nhập thừa.
— Amir
1 
import {jQuery as $} from 'jquery';
— Farsheed
nguồn
1
nó cho biết không tìm thấy jQuery. Câu trả lời khác hoạt động "import * as $ from 'jquery';". Bạn có biết tại sao điều đó xảy ra không? Tập tin JS của tôi, nơi tôi đang nhập khẩu jquery là phần của một tập tin kiễu góc / nguyên cảo
— SpaceMonkey
1

Tôi chưa thấy cú pháp chính xác này được đăng và nó hoạt động với tôi trong môi trường ES6 / Webpack:

import $ from "jquery";

Lấy trực tiếp từ trang NPM của jQuery . Hy vọng điều này sẽ giúp ai đó.

— Stephen Shank
nguồn
1

Nếu bạn không sử dụng bất kỳ công cụ xây dựng JS / NPM nào, thì bạn có thể bao gồm trực tiếp Jquery dưới dạng: 

import  'https://code.jquery.com/jquery-1.12.4.min.js';
const $ = window.$;

Bạn có thể bỏ qua việc nhập (Dòng 1) nếu bạn đã bao gồm jquery bằng cách sử dụng thẻ script dưới đầu.

— VNN456
nguồn
Tôi không biết tại sao, nhưng cái này có hiệu quả với tôi khi không có người khác làm. Bất kỳ câu lệnh nhập nào khác với câu lệnh trống đều gây import 'filepath/jquery.js'ra một số lỗi về việc mô-đun không xuất ra chức năng tôi muốn hoặc $ không phải là một chức năng hoặc chỉ là một Lỗi cú pháp ngay khi nhìn thấy từ này from.
— Galactic Ketchup
0

Trước hết, hãy cài đặt và lưu chúng trong package.json:

npm i --save jquery
npm i --save jquery-ui-dist

Thứ hai, thêm bí danh trong cấu hình webpack:

resolve: {
  root: [
    path.resolve(__dirname, '../node_modules'),
    path.resolve(__dirname, '../src'),
  ],
  alias: {
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
  },
  extensions: ['', '.js', '.json'],
}

Nó hoạt động với tôi với jquery cuối cùng (3.2.1) và jquery-ui (1.12.1).

Xem blog của tôi để biết chi tiết: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

— cwtuan
nguồn
0

Nhập jquery (tôi đã cài đặt bằng 'npm install jquery@1.9.1')

import 'jquery/jquery.js';

Đặt tất cả mã của bạn phụ thuộc vào jquery bên trong phương thức này

+function ($) { 
    // your code
}(window.jQuery);

hoặc khai báo biến $ sau khi nhập

var $ = window.$
— Yoseph
nguồn
0

Tôi muốn sử dụng jQuery alread-buildy (từ jquery.org) và tất cả các giải pháp được đề cập ở đây đều không hoạt động, cách tôi khắc phục sự cố này là thêm các dòng sau để làm cho nó hoạt động trên hầu hết mọi môi trường:

 export default  ( typeof module === 'object' && module.exports && typeof module.exports.noConflict === 'function' )
    ? module.exports.noConflict(true)
    : ( typeof window !== 'undefined' ? window : this ).jQuery.noConflict(true)
— Ivan Castellanos
nguồn
Ivan Castellanos bạn nên mở rộng ví dụ của bạn để hiểu rõ hơn về làm thế nào để áp dụng nó
— north.inhale
0

Bạn có thể nhập như thế này

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});
— SlingEr.
nguồn
0

Ngăn xếp dự án của tôi là: ParcelJS + WordPress

WordPress có bản thân jQuery v1.12.4 và tôi cũng đã nhập jQuery v3 ^ làm mô-đun cho các mô-đun phụ thuộc khác bootstrap/js/dist/collapse, chẳng hạn như ... Thật không may, tôi không thể để lại chỉ một phiên bản jQuery do các phụ thuộc mô-đun WordPress khác. Và tất nhiên có xung đột phát sinh giữa hai phiên bản jquery. Cũng nên nhớ rằng chúng tôi có hai chế độ cho dự án này chạy Wordpress (Apache) / ParcelJS (NodeJS), phù thủy làm cho mọi thứ trở nên khó khăn một chút. Vì vậy, giải pháp cho xung đột này là tìm kiếm, đôi khi dự án bị phá vỡ ở bên trái, đôi khi ở bên phải. VẬY ... Giải pháp tài chính của tôi (tôi hy vọng nó như vậy ...) là:

    import $ from 'jquery'
    import 'popper.js'
    import 'bootstrap/js/dist/collapse'
    import 'bootstrap/js/dist/dropdown'
    import 'signalr'

    if (typeof window.$ === 'undefined') {
        window.$ = window.jQ = $.noConflict(true);
    }

    if (process) {
        if (typeof window.jQuery === 'undefined') {
            window.$ = window.jQuery = $.noConflict(true);
        }
    }

    jQ('#some-id').do('something...')    

    /* Other app code continuous below.......... */

Tôi vẫn không hiểu bản thân mình như thế nào, nhưng phương pháp này hoạt động. Lỗi và xung đột của hai phiên bản jQuery không còn phát sinh

— bắc.inhale
nguồn
0

Nếu bạn đang sử dụng Webpack 4, câu trả lời là sử dụng ProvidePlugin. Tài liệu của họ đặc biệt đề cập đến angle.js với trường hợp sử dụng jquery :

new webpack.ProvidePlugin({
  'window.jQuery': 'jquery'
});

Vấn đề là khi sử dụng importcú pháp angle.js và jquery sẽ luôn được nhập trước khi bạn có cơ hội gán jquery cho window.jQuery (các importcâu lệnh sẽ luôn chạy trước bất kể chúng ở đâu trong mã!). Điều này có nghĩa là angle sẽ luôn thấy window.jQuery là không xác định cho đến khi bạn sử dụng ProvidePlugin.

— Martin Konecny
nguồn
0

Pika là một CDN chuyên cung cấp các phiên bản mô-đun của các gói phổ biến

<script type='module'>
    import * as $ from 'https://cdn.skypack.dev/jquery';

    // use it!
    $('#myDev').on('click', alert);
</script>

Skypack là Pika, vì vậy bạn cũng có thể sử dụng: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

— SamGoody
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.