ES6構文を使用してjqueryをインポートする方法

128

私はトランスパイラーとプラグイン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構文を使用しようとしています。

  • ES6インポート構文jqueryをsemantic-ui使用して満足させるにはどうすればよいですか？
  • node_modules/ディレクトリからインポートする必要dist/がありますか、それとも（すべてをコピーする場所）からインポートする必要がありますか？
javascript  jquery  ecmascript-6  browserify  semantic-ui 
— エドゥアールロペス
ソース
2
まあ、そこからのインポートdistは意味がありません。それは本番用のアプリが入っている配布フォルダーだからです。アプリを構築するには、ノードモジュールの内容を取得し、jQueryを含めてdistフォルダーに追加する必要があります。
— nem035 2015
また、scssファイルからのインポートも行いません。私が見逃している素晴らしいプラグインがない限り！
— CodingIntrigue 2015
それは呼ばれています@RGraham sassify、browserifyプラグインを。私はオンクレトムの要点
— エドゥアールロペス
確認します、ありがとう！
— CodingIntrigue
@RGraham-構文は奇妙に見えますが、css / sassファイルに「require」を使用することは、webpack + babelなどのビルドツールで推奨されます。例えば。require（ "../ node_modules / bootstrap / dist / 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と$）、そのstraigforward import文が動作します。

最後に、を使用してそれを他のスクリプトに公開する必要がありますwindow.$ = $。

その後、私は両方としてインポート$し、jQueryすべての使用をカバーするために、browserify削除、インポート、複製、そうオーバーヘッドなしここに！^ o ^ y

— エドゥアールロペス
ソース
6
まだあるかどうかわからないが、の必要性を説明できますかwindow.$ = $。それが必要な理由がわかりません。jsbrowserifyが魔法のように機能する場合、他のスクリプトは自動的に単一のスクリプトにバンドルされませんか？
— qarthandso
13
なぜただ持っていないのimport {$,jQuery} from 'jquery';ですか？なぜそれほど多くの輸入品があるのですか？
— ジャッキー
4
正確なクラス名をどのように見つけるjQueryか、すなわち？
— Avinash Raj
13
私は得るModule '"jquery"' has no exported member 'jQuery'か、Module '"jquery"' has no default export何が欠けていますか？
— daslicht 2016
4
古いバージョンのjQueryは名前付きエクスポートを使用しません。新しいバージョンにはあります。インポートの方法は、使用しているjQueryのバージョンによって異なります。
— pmont 2018年
55

エドゥアールロペスの解法に基づいていますが、次の2行です。

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
— ha7ilm
ソース
2
これは私にとってはうまくいきましたが、受け入れられた回答のアプローチはそうではありませんでした...私はほとんど同じことを使いました：import j from 'jquery'; window.jQuery = $; window。$ = $;
— arcseldon 2017
3
1行：window.$ = window.jQuery = require('jquery');
— Nabil Baadillah
2
@NabilBaadillah require（CommonJS）はimport（ESモジュール）ではなく、ワンライナーはで可能ではないようですimport。（誰かが気に？）
— ニコラ・ル・ティエリー・デネキン
13

JQueryのコンテンツ全体をGlobalスコープにインポートします。これにより、JQueryからエクスポートされたすべてのバインディングを含む現在のスコープに$が挿入されます。

import * as $ from 'jquery';

$はwindowオブジェクトに属します。

— イヴァンヘルツ
ソース
1
これは私のために働いた。トップ "{jquery"から{jQueryを$}としてインポート; " 「jQuery」が見つからないというエラーが表示されます。
— SpaceMonkey 2018年
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

— ユクレレ
ソース
1
これは役に立ちました！IDE / DevEnvを使用する前に、基本を試してみたいと思います。Node / NPM / Babbleを使用せずに、ES6のインポートとエクスポートを理解したいと思いました。基本的なインポートとエクスポートをうまく機能させることができましたが、jqueryの取り込みに苦労していました。カスタムコードをモジュールとして記述しましたが、htmlのスクリプトタグを使用して従来の方法でjqueryを参照し続けました。そのため、jqueryを含めるスクリプトタグとapp.jsを含めるスクリプトタグの2つができました。あなたの答えで、私は私の最初のjqueryスクリプトタグを取り除くことができ、あなたが提案したように中間のjquery.module.jsを使用しました。
— sidnc86
9

受け入れられた回答は私にとって はうまくいきませんでした
：ロールアップjsを使用すると、この回答が npm iの
後でここに属しているかどうかわかりません-custom.jsで
jquery
を保存します

import {$, jQuery} from 'jquery';

または

import {jQuery as $} from 'jquery';

エラーが発生しました：モジュール... node_modules / jquery / dist / jquery.jsがjQueryをエクスポートしない、
または
モジュール... 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",
  },

これは機能しました：
ロールアップインジェクトとcommonjsプラグインを削除しました

import * as jQuery from 'jquery';

次にcustom.jsで

$(function () {
        console.log('Hello jQuery');
});
— リティン
ソース
namedExportscommonjsプラグインにはもう存在しないようです
— Nicolas Hoizey
7

それが誰かを助けるなら、javascript importステートメントは巻き上げられます。したがって、ライブラリがグローバルネームスペース（ウィンドウ）のjqueryに依存（ブートストラップなど）している場合、これは機能しません。

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

これは、jQueryがウィンドウにアタッチされる前に、ブートストラップのインポートが巻き上げられて評価されるためです。

これを回避する1つの方法は、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;

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

— クレイグマイケルマルティン
ソース
6

webpackユーザーは、pluginsアレイに以下を追加します。

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
— ムハンマドレダ
ソース
4
このアプローチの利点は何ですか？ここであなたはあなた自身をあなたの構築ツールにバインドしているからです。
— エドゥアールロペス
これが私が機能させる唯一の方法です。試しましたimport {$, jQuery} from 'jquery';が、idが機能しませんでした。他のモジュールで定義（インポート）されていないためです。
— ムハンマドレダ2017
2
jQueryは冗長なインポートステートメントなしですべてのファイルでグローバルに使用できるため、これはWebpackユーザーにとって最良のソリューションです。
— アミール
1 
import {jQuery as $} from 'jquery';
— ファーシード
ソース
1
jQueryが見つからなかったと表示されます。もう1つの答えは、「import * as $ from 'jquery';」として機能しました。それがなぜ起こるか知っていますか？jqueryをインポートしている私のJSファイルは、Angular /
— Typescript
1

JSビルドツール/ NPMを使用していない場合は、Jqueryを次のように直接含めることができます。 

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

ヘッドの下にスクリプトタグを使用してjqueryをすでに含めている場合は、インポート（1行目）をスキップできます。

— VNN456
ソース
理由はわかりませんが、他の人が何もしなかったときにこれがうまくいきました。ベア以外のインポート文import 'filepath/jquery.js'は、モジュールが私が望んだ関数をエクスポートしていないか、$が関数ではないか、または単にWordの構文エラーであるというエラーを投げましたfrom。
— 銀河ケチャップ
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.$
— ヨセフ
ソース
0

私は（jquery.orgからの）既製のjQueryを使用したかったのですが、ここで説明されているすべてのソリューションが機能しませんでした。

 export default  ( typeof module === 'object' && module.exports && typeof module.exports.noConflict === 'function' )
    ? module.exports.noConflict(true)
    : ( typeof window !== 'undefined' ? window : this ).jQuery.noConflict(true)
— イヴァンカステリャノス
ソース
イワンCastellanosのは、あなた方にあなたの例を拡張し、それを適用する方法を理解する必要があります
— north.inhale
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。たとえば、...残念ながら、他のWordPressモジュール依存関係のため、jQueryバージョンを1つだけ残すことはできません。そしてもちろん、2つのjqueryバージョン間で競合が発生します。また、Wordpress（Apache）/ ParcelJS（NodeJS）を実行するこのプロジェクトには2つのモードがあり、すべてが少し困難になります。したがって、この競合の解決策は検索でしたが、プロジェクトが左側で壊れたり、右側で壊れたりすることがあります。SO ...私のfinallソリューション（そう願っています...）は次のとおりです。

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

私はまだ自分自身を理解していませんでしたが、この方法は機能します。2つのjQueryバージョンのエラーと競合は発生しなくなりました

— north.inhale
ソース
0

Webpack 4を使用している場合、答えはを使用することProvidePluginです。彼らのドキュメントは特にjqueryユースケースでangular.jsをカバーしています：

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

問題は、import構文を使用すると、angular.jsとjqueryが常にインポートされてから、jqueryをwindow.jQueryに割り当てる機会が与えられることです（importステートメントは、コード内のどこにあっても常に最初に実行されます！）。これは、を使用するまで、angularが常にwindow.jQueryを未定義として認識することを意味しますProvidePlugin。

— マーティン・コネクニー
ソース
0

Pikaは、人気のあるパッケージのモジュールバージョンを提供するCDNです。

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

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

スカイパックはピカなので、次のものも使用できます。 import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

— サムグッディ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.