it-swarm.com.de

Wie importiere ich Jquery mit ES6-Syntax?

Ich schreibe eine neue App mit (JavaScript) ES6-Syntax über babel transpiler und den preset-es2015-Plugins sowie semantic-ui für den Stil. 

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>

Projektstruktur

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

Frage

Die Verwendung des klassischen <script>-Tags zum Importieren von jquery funktioniert gut, aber ich versuche, die ES6-Syntax zu verwenden.

  • Wie importiere ich jquery, um semantic-ui mit der ES6-Importsyntax zu erfüllen?
  • Soll ich aus dem node_modules/-Verzeichnis oder meinem dist/ (wo ich alles kopiere) importieren?
93
Édouard Lopez

index.js

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

Erstens, da @nem im Kommentar vorgeschlagen wurde, sollte der Import von node_modules/ erfolgen:

Nun, das Importieren aus dist/ ist nicht sinnvoll, da dies der Distributionsordner mit der produktionsbereiten App ist. Das Erstellen Ihrer App sollte den Inhalt von node_modules/ in den Ordner dist/ (einschließlich jQuery) aufnehmen.

Als Nächstes ist der Glob –* as– falsch, da ich weiß, welches Objekt ich importiere (z. B.jQuery und $), sodass eine straigforward import-Anweisung funktioniert. 

Zuletzt müssen Sie es mit dem window.$ = $ anderen Skripten aussetzen.

Dann importiere ich als $ und jQuery, um alle Verwendungen abzudecken, browserify Import-Duplizierungen entfernen, also kein Overhead hier! ^ o ^ y

104
Édouard Lopez

Basierend auf der Lösung von Édouard Lopez, jedoch in zwei Zeilen:

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

Die akzeptierte Antwort hat bei mir nicht funktioniert 
Hinweis: Mit Rollup js weiß nicht, ob diese Antwort hierher gehört 
nach dem
npm i --save jquery
in custom.js

import {$, jQuery} from 'jquery';

oder

import {jQuery as $} from 'jquery';

ich bekam error : Modul ... node_modules/jquery/dist/jquery.js exportiert nicht jQuery
oder
Modul ... node_modules/jquery/dist/jquery.js exportiert nicht $
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',
};

statt aufspritzen injizieren, versucht 

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

Das hat funktioniert:
entfernte die Rollup-Inject- und Commonjs-Plugins

import * as jQuery from 'jquery';

dann in custom.js

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

Sie können einen Modulkonverter erstellen:

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

Dadurch werden die von jQuery eingeführten globalen Variablen entfernt und das jQuery-Objekt standardmäßig exportiert.

Dann verwenden Sie es in Ihrem Skript:

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

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

Vergessen Sie nicht, es als Modul in Ihr Dokument zu laden

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

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

5
Yukulélé

webpack-Benutzer, fügen Sie das unten stehende zu Ihrem plugins-Array hinzu.

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

Wenn es jemandem hilft, werden Javascript-Importanweisungen angehoben. Wenn eine Bibliothek eine Abhängigkeit (zB Bootstrap) von Jquery im globalen Namespace (Fenster) hat, funktioniert dies NICHT:

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

Dies liegt daran, dass der Import von Bootstrap vor dem Anhängen von jQuery an window angehängt und ausgewertet wird.

Eine Möglichkeit, dies zu umgehen, besteht darin, jQuery nicht direkt zu importieren, sondern stattdessen ein Modul zu importieren, das jQuery selbst importiert und an das Fenster anfügt.

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

wo leaked-jquery aussieht

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

4

Importieren Sie den gesamten Inhalt von JQuery im globalen Bereich. Dadurch wird $ in den aktuellen Bereich eingefügt, der alle von JQuery exportierten Bindungen enthält.

import * as $ from 'jquery';

Jetzt gehört das $ zum Fensterobjekt.

3
ivan hertz
import {jQuery as $} from 'jquery';
1
Farsheed

Installieren und speichern Sie sie zuerst in package.json:

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

Fügen Sie in der Webpack-Konfiguration einen Alias ​​hinzu:

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

Es funktioniert für mich mit der letzten Jquery (3.2.1) und Jquery-Ui (1.12.1).

Weitere Informationen finden Sie in meinem Blog: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-eses-syntax.html

0
cwtuan

Ich wollte die bereits erstellte jQuery (von jquery.org) verwenden, und alle hier genannten Lösungen funktionierten nicht. Wie ich dieses Problem behoben habe, fügte ich die folgenden Zeilen hinzu, die in fast jeder Umgebung funktionieren sollten:

 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

Importiere jquery (ich habe es mit 'npm install [email protected]' installiert)

import 'jquery/jquery.js';

Fügen Sie den gesamten Code, der von jquery abhängt, in diese Methode ein

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

oder deklarieren Sie die Variable $ nach dem Import

var $ = window.$
0
Yoseph