วิธีการนำเข้า jquery โดยใช้ไวยากรณ์ ES6

129

ฉันกำลังเขียนแอพใหม่โดยใช้ES6ไวยากรณ์(JavaScript) ผ่านทbabelรานสไพเลอร์และpreset-es2015ปลั๊กอินรวมถึงsemantic-uiสไตล์

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>

โครงสร้างโครงการ

.
├── 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}]
    ]
  }

คำถาม

การใช้<script>แท็กคลาสสิกเพื่อนำเข้าjqueryทำงานได้ดี แต่ฉันกำลังพยายามใช้ไวยากรณ์ ES6

ฉันจะนำเข้าjqueryเพื่อตอบสนองsemantic-uiโดยใช้ไวยากรณ์การนำเข้า ES6 ได้อย่างไร
ฉันควรนำเข้าจากnode_modules/ไดเร็กทอรีหรือของฉันdist/(ที่ฉันคัดลอกทุกอย่าง)?

— Édouard Lopez
แหล่งที่มา

2

การนำเข้าจากdistไม่สมเหตุสมผลเนื่องจากเป็นโฟลเดอร์แจกจ่ายของคุณพร้อมแอปที่พร้อมใช้งานจริง การสร้างแอปของคุณควรนำสิ่งที่อยู่ภายในโมดูลโหนดและเพิ่มลงในโฟลเดอร์ dist รวมถึง jQuery

— nem035

และไม่นำเข้าจากไฟล์scss เว้นแต่จะมีปลั๊กอินที่ยอดเยี่ยมที่ฉันพลาดไป!

— CodingIntrigue

@RGraham ก็เรียกว่าsassifyเป็น browserify ปลั๊กอิน ฉันเป็นแรงบันดาลใจให้ตัวเองจากoncletom gist

— Édouard Lopez

ฉันจะตรวจสอบให้ขอบคุณ!

— CodingIntrigue

@RGraham - ไวยากรณ์ดูแปลก ๆ แต่การใช้ "ต้อง" สำหรับไฟล์ css / sass จะได้รับการสนับสนุนด้วยเครื่องมือสร้างเช่น webpack + babel เช่น. ต้อง ( "../ node_modules / บูต / อ css / / bootstrap.min.css");

— arcseldon

129

index.js

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

ขั้นแรกตามที่@nemแนะนำในความคิดเห็นควรนำเข้าจากnode_modules/:

การนำเข้าจากdist/ไม่สมเหตุสมผลเนื่องจากเป็นโฟลเดอร์แจกจ่ายของคุณพร้อมแอปที่พร้อมใช้งานจริง การสร้างแอปของคุณควรนำสิ่งที่อยู่ภายในnode_modules/และเพิ่มลงในdist/โฟลเดอร์รวมถึง jQuery

ต่อไปลูกโลก - * as- ผิดเพราะฉันรู้ว่าฉันกำลังนำเข้าวัตถุอะไร ( เช่น jQueryและ$) ดังนั้นคำสั่งการนำเข้าที่ตรงไปตรงมาจะใช้งานได้

สุดท้ายคุณต้องเปิดเผยกับสคริปต์อื่นโดยใช้ไฟล์window.$ = $.

จากนั้นฉันนำเข้าเป็นทั้งสองอย่าง$และjQueryเพื่อให้ครอบคลุมการใช้งานทั้งหมดbrowserifyลบการทำซ้ำการนำเข้าจึงไม่มีค่าใช้จ่ายที่นี่! ^ o ^ Y

— Édouard Lopez
แหล่งที่มา

6

ไม่แน่ใจว่าคุณยังอยู่รอบ ๆ หรือไม่ แต่คุณสามารถอธิบายความต้องการwindow.$ = $ได้ ฉันไม่เข้าใจว่าทำไมถึงจำเป็น จะไม่รวมสคริปต์อื่น ๆ ไว้ในjsสคริปต์เดียวโดยอัตโนมัติเมื่อ browserify เป็นเวทมนตร์หรือไม่?

— qarthandso

13

ทำไมไม่เพิ่งมีimport {$,jQuery} from 'jquery';? ทำไมต้องมีการนำเข้าจำนวนมาก?

— Jackie

4

คุณจะหาชื่อคลาสที่แน่นอนได้jQueryอย่างไรเช่น?

— Avinash Raj

13

ฉันได้รับModule '"jquery"' has no exported member 'jQuery'หรือModule '"jquery"' has no default exportสิ่งที่ฉันพลาดได้โปรด?

— daslicht

4

jQuery เวอร์ชันเก่าจะไม่ใช้การส่งออกที่มีชื่อ เวอร์ชันใหม่กว่าทำ วิธีการนำเข้าขึ้นอยู่กับเวอร์ชันของ jQuery ที่คุณใช้

— pmont

55

ขึ้นอยู่กับการแก้ปัญหาของÉdouard Lopez แต่มีสองบรรทัด:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;

— ha7ilm
แหล่งที่มา

2

สิ่งนี้ใช้ได้ผลสำหรับฉันในขณะที่วิธีการตอบรับที่ยอมรับไม่ได้ ... ฉันใช้แบบเดียวกันมาก: import $ จาก 'jquery'; window.jQuery = $; window. $ = $;

— arcseldon

3

one line:window.$ = window.jQuery = require('jquery');

— Nabil Baadillah

2

@NabilBaadillah require(CommonJS) ไม่import(ES โมดูล) importและหนึ่งซับดูเหมือนจะไม่เป็นไปได้ด้วย (มีใครสนใจบ้าง?)

— Nicolas Le Thierry d'Ennequin

14

นำเข้าเนื้อหาทั้งหมดของ JQuery ในขอบเขตส่วนกลาง สิ่งนี้จะแทรก $ ลงในขอบเขตปัจจุบันซึ่งมีการผูกที่ส่งออกทั้งหมดจาก JQuery

import * as $ from 'jquery';

ตอนนี้ $ เป็นของวัตถุหน้าต่าง

— อีวานเฮิรตซ์
แหล่งที่มา

1

สิ่งนี้ได้ผลสำหรับฉัน ด้านบน "นำเข้า {jQuery เป็น $} จาก 'jquery';" แสดงข้อผิดพลาดว่าไม่พบ "jQuery"

— SpaceMonkey

12

คุณสามารถสร้างตัวแปลงโมดูลดังต่อไปนี้:

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

สิ่งนี้จะลบตัวแปรส่วนกลางที่แนะนำโดย jQuery และส่งออกวัตถุ jQuery เป็นค่าเริ่มต้น

จากนั้นใช้ในสคริปต์ของคุณ:

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

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

อย่าลืมโหลดเป็นโมดูลในเอกสารของคุณ:

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

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

— Yukulélé
แหล่งที่มา

1

อันนี้ช่วย! โดยทั่วไปฉันชอบทดลองใช้พื้นฐานก่อนใช้ IDE / DevEnv โดยไม่ต้องใช้ Node / NPM / Babble ฉันต้องการเข้าใจการนำเข้าและส่งออก ES6 ฉันสามารถนำเข้าและส่งออกขั้นพื้นฐานได้แล้ว แต่กำลังดิ้นรนกับการรวม jquery ฉันเขียนโค้ดที่กำหนดเองเป็นโมดูล แต่ยังคงอ้างอิง jquery ในแบบดั้งเดิมโดยใช้แท็กสคริปต์ใน html ดังนั้นฉันจึงมีแท็กสคริปต์ 2 แท็กหนึ่งเพื่อรวม jquery และอื่น ๆ เพื่อรวม app.js ด้วยคำตอบของคุณฉันสามารถลบแท็กสคริปต์ jquery แรกของฉันและใช้ jquery.module.js ระดับกลางตามที่คุณแนะนำ

— sidnc86

9

คำตอบที่ยอมรับไม่ได้ผลสำหรับฉัน
หมายเหตุ: การใช้ rollup jsไม่ทราบว่าคำตอบนี้อยู่ที่นี่
หลังจาก
npm i - บันทึก jquery
ใน custom.js

import {$, jQuery} from 'jquery';

หรือ

import {jQuery as $} from 'jquery';

ฉันได้รับข้อผิดพลาด : Module ... node_modules / jquery / dist / jquery.js ไม่ส่งออกjQuery
หรือ
Module ... node_modules / jquery / dist / jquery.js ไม่ส่งออก$
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',
};

แทนที่จะใช้การฉีดแบบสะสมพยายาม

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",
  },

วิธีนี้ได้ผล:
ลบ rollup injection และ commonjs plugins

import * as jQuery from 'jquery';

จากนั้นใน custom.js

$(function () {
        console.log('Hello jQuery');
});

— Ritin
แหล่งที่มา

ดูเหมือนว่าnamedExportsจะไม่มีอยู่อีกต่อไปในปลั๊กอิน commonjs

— Nicolas Hoizey

7

หากจะช่วยใครงบนำเข้าจาวาสคริปต์จะถูกยกขึ้น ดังนั้นหากไลบรารีมีการพึ่งพา (เช่น bootstrap) บน jquery ใน global namespace (หน้าต่าง) สิ่งนี้จะไม่ทำงาน:

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

เนื่องจากการนำเข้า bootstrap ถูกยกขึ้นและได้รับการประเมินก่อนที่จะแนบ jQuery กับหน้าต่าง

วิธีหนึ่งในการแก้ไขปัญหานี้คืออย่านำเข้า jQuery โดยตรง แต่จะนำเข้าโมดูลที่นำเข้า jQuery และแนบเข้ากับหน้าต่างแทน

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

ที่leaked-jqueryดูเหมือน

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

เช่นhttps://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js

— craigmichaelmartin
แหล่งที่มา

6

ผู้ใช้ webpack เพิ่มด้านล่างในpluginsอาร์เรย์ของคุณ

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];

— มูฮัมหมัดเรดา
แหล่งที่มา

4

อะไรคือความโปรของแนวทางนี้? เพราะคุณผูกพันตัวเองกับเครื่องมือสร้างของคุณที่นี่

— Édouard Lopez

นี่เป็นวิธีเดียวที่ฉันทำให้มันใช้งานได้ ฉันลองแล้วimport {$, jQuery} from 'jquery';แต่ id ใช้ไม่ได้ฉันเชื่อเพราะไม่ได้กำหนด (นำเข้า) ในโมดูลอื่น

— มูฮัมหมัดเรดา

2

นี่เป็นทางออกที่ดีที่สุดสำหรับผู้ใช้ webpack เนื่องจาก jQuery ควรพร้อมใช้งานทั่วโลกในทุกไฟล์โดยไม่มีคำสั่งการนำเข้าซ้ำซ้อน

— Amir

1

import {jQuery as $} from 'jquery';

— Farsheed
แหล่งที่มา

1

มันแจ้งว่าไม่พบ jQuery คำตอบอื่นใช้งานได้ว่า "import * as $ from" jquery ";" คุณรู้ไหมว่าทำไมถึงเกิดขึ้น? ไฟล์ JS ของฉันที่ฉันนำเข้า jquery เป็นส่วนหนึ่งของไฟล์ Angular / typescript

— SpaceMonkey

1

ฉันยังไม่เห็นไวยากรณ์ที่ถูกต้องนี้โพสต์และใช้ได้กับฉันในสภาพแวดล้อม ES6 / Webpack:

import $ from "jquery";

โดยตรงจากหน้า NPM ของ jQuery หวังว่านี่จะช่วยใครบางคนได้

— Stephen Shank
แหล่งที่มา

1

หากคุณไม่ได้ใช้เครื่องมือสร้าง JS / NPM คุณสามารถรวม Jquery ได้โดยตรง:

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

คุณสามารถข้ามการนำเข้า (บรรทัดที่ 1) หากคุณรวม jquery โดยใช้แท็กสคริปต์ไว้ใต้ head แล้ว

— VNN456
แหล่งที่มา

ฉันไม่รู้ว่าทำไม แต่อันนี้ใช้ได้ผลกับฉันเมื่อไม่มีคนอื่นทำ คำสั่งนำเข้าใด ๆ นอกเหนือจาก bare import 'filepath/jquery.js'ทำให้เกิดข้อผิดพลาดบางอย่างเกี่ยวกับโมดูลที่ไม่ส่งออกฟังก์ชันที่ฉันต้องการหรือ $ ไม่ใช่ฟังก์ชันหรือเป็นเพียง SyntaxError ที่เห็นคำfromนั้น

— Galactic Ketchup

0

ก่อนอื่นติดตั้งและบันทึกใน package.json:

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

ประการที่สองเพิ่มนามแฝงในการกำหนดค่า webpack:

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

มันใช้ได้กับฉันกับ jquery สุดท้าย (3.2.1) และ jquery-ui (1.12.1)

ดูรายละเอียดในบล็อกของฉัน: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

— cwtuan
แหล่งที่มา

0

นำเข้า jquery (ฉันติดตั้งด้วย 'npm install jquery@1.9.1')

import 'jquery/jquery.js';

ใส่รหัสทั้งหมดของคุณที่ขึ้นอยู่กับ jquery ในวิธีนี้

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

หรือประกาศตัวแปร $ หลังจากนำเข้า

var $ = window.$

— Yoseph
แหล่งที่มา

0

ฉันต้องการใช้ jQuery alread-buildy (จาก jquery.org) และวิธีแก้ปัญหาทั้งหมดที่กล่าวถึงในที่นี้ไม่ได้ผลฉันแก้ไขปัญหานี้ได้อย่างไรคือการเพิ่มบรรทัดต่อไปนี้ซึ่งควรทำให้ใช้งานได้ในเกือบทุกสภาพแวดล้อม:

 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
แหล่งที่มา

Ivan Castellanos คุณควรขยายตัวอย่างของคุณเพื่อให้เข้าใจวิธีการใช้งานได้ดีขึ้น

— เหนือ

0

คุณสามารถนำเข้าแบบนี้

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});

— Slinger
แหล่งที่มา

0

กองโครงการของฉันคือParcelJS + WordPress

WordPress มีjQuery v1.12.4เองและฉันยังนำเข้าjQuery v3 ^เป็นโมดูลสำหรับโมดูลอื่น ๆ ที่ขึ้นอยู่ด้วยbootstrap/js/dist/collapseเช่นกัน ... น่าเสียดายที่ฉันไม่สามารถปล่อย jQuery เพียงเวอร์ชันเดียวได้เนื่องจากการพึ่งพาโมดูลอื่น ๆ ของ WordPress และแน่นอนว่ามีความขัดแย้งเกิดขึ้นระหว่างสองเวอร์ชัน jquery นอกจากนี้โปรดทราบว่าเรามีสองโหมดสำหรับโครงการนี้ที่ใช้ Wordpress (Apache) / ParcelJS (NodeJS) แม่มดทำให้ทุกอย่างยากขึ้นเล็กน้อย ดังนั้นวิธีแก้ปัญหาสำหรับความขัดแย้งนี้คือการค้นหาบางครั้งโครงการแตกทางด้านซ้ายบางครั้งก็อยู่ทางด้านขวา ดังนั้น ... ทางออกสุดท้ายของฉัน (ฉันหวังว่าจะเป็นอย่างนั้น ... ) คือ:

    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.......... */

ฉันยังไม่เข้าใจว่าตัวเองเป็นอย่างไร แต่วิธีนี้ใช้ได้ผล ข้อผิดพลาดและความขัดแย้งของ jQuery สองเวอร์ชันไม่เกิดขึ้นอีกต่อไป

— north.inhale
แหล่งที่มา

0

หากคุณใช้ Webpack 4 คำตอบคือใช้ไฟล์ProvidePlugin. เอกสารของพวกเขาครอบคลุมเฉพาะ angular.js พร้อม jquery use case:

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

ปัญหาคือเมื่อใช้importไวยากรณ์ angular.js และ jquery จะถูกนำเข้าเสมอก่อนที่คุณจะมีโอกาสกำหนด jquery ให้กับ window.jQuery ( importคำสั่งจะทำงานก่อนเสมอไม่ว่าจะอยู่ที่ใดในโค้ดก็ตาม!) ซึ่งหมายความว่าเชิงมุมก็จะเห็นเป็นไม่ได้กำหนด window.jQuery ProvidePluginจนกว่าคุณจะใช้

— Martin Konecny
แหล่งที่มา

0

Pika เป็น CDN ที่ดูแลการจัดหาแพ็คเกจยอดนิยมในเวอร์ชันโมดูล

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

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

Skypack คือ Pika ดังนั้นคุณสามารถใช้: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

— SamGoody
แหล่งที่มา