Wie importiere ich JQuery mit ES6-Syntax?

Question

Dec 17, 2015, 04:35 PM

ecmascript-6 import jquery semantic-ui browserify

Wie importiere ich JQuery mit ES6-Syntax?

Ich schreibe eine neue App mit (JavaScript)ES6 Syntax durchbabel transpiler und daspreset-es2015 Plugins sowiesemantic-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}]
    ]
  }

Frag

Mit classic<script> tag zum importierenjquery funktioniert gut, aber ich versuche, die ES6-Syntax zu verwenden.

Wie importiere ichjquery erfüllensemantic-ui Verwenden der ES6-Importsyntax? Sollte ich aus dem @ importiernode_modules/ Verzeichnis oder meindist/ (wo ich alles kopiere)?