web-dev-qa-db-ja.com

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

私は（JavaScript）babel transpilerとES6プラグインを介した（JavaScript）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/（すべてをコピーする場所）からインポートする必要がありますか。
jqueryimportecmascript-6browserifysemantic-ui
104
Édouard Lopez

index.js

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

最初に、@ nemがコメントで示唆したように、インポートはnode_modules/から行われるべきです：

さて、dist/からインポートすることは意味がありません。なぜならそれはあなたのディストリビューションフォルダがプロダクション対応のアプリだからです。アプリケーションを構築するには、node_modules/内にあるものを取り出し、それをjQueryを含むdist/フォルダーに追加します。

次に、glob –* as–は、どのオブジェクトをインポートしているか（、（jQueryおよび$）など）を知っているので、間違っているので、単純な importステートメント を使用します。

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

それから、すべての用途をカバーするために$とjQueryの両方としてインポートします。browserifyはインポートの重複を排除するので、ここでオーバーヘッドは発生しません。 ^ o ^ y

112
Édouard Lopez

ÉdouardLopezの解に基づいていますが、2行で

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

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

import * as $ from 'jquery';

これで$はウィンドウオブジェクトに属します。

8
ivan hertz

受け入れられた答えは私のために働かなかった
注：ロールアップjsを使用すると、この回答がここに属するかどうかわからない
後
npm i - 保存jquery
custom.jsの

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');
});
7
Ritin

以下のようにモジュールコンバータを作成することができます。

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

5
Yukulélé

それが誰かを助けてくれるのであれば、Javascriptのimport文を掲げます。したがって、ライブラリがグローバル名前空間（ウィンドウ）でjqueryに依存（たとえばブートストラップ）している場合、これは機能しません。

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

これは、jQueryがwindowにアタッチされる前に、ブートストラップのインポートが持ち上げられ評価されるためです。

これを回避する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;

たとえば、 https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js

5
craigmichaelmartin

webpackユーザーの方は、plugins配列に以下を追加してください。

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
4
Muhammad Reda
import {jQuery as $} from 'jquery';
1
Farsheed

まず最初に、それらを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

0
cwtuan

私は（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)
0
Ivan Castellanos

Jqueryをインポートする（ 'npm install [email protected]'でインストールしました）

import 'jquery/jquery.js';

このメソッド内にjqueryに依存するすべてのコードを配置してください。

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

またはインポート後に変数$を宣言する

var $ = window.$
0
Yoseph