[解決済み] ES6構文を使用してjqueryをインポートする方法は？

2022-03-03 21:27:08

質問

私は（JavaScript）を使って新しいアプリを書いています。 ES6 の構文で 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/

パッケージ.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/ (すべてをコピーする場所)ですか？

解決方法は？

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

[解決済み] ES6構文を使用してjqueryをインポートする方法は？

質問

index.js

index.html

プロジェクト構成

パッケージ.json

質問

解決方法は？

index.js

関連

最新

おすすめ