如何使用ES6语法导入jquery？

javascript jquery ecmascript-6 browserify semantic-ui

2022-08-30 02:38:06

我正在通过转译器和插件以及样式使用（JavaScript）语法编写一个新应用程序。ES6babelpreset-es2015semantic-ui

索引.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'));

索引.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}]
    ]
  }

问题

使用经典标签导入工作正常，但我正在尝试使用ES6语法。<script>jquery

如何导入以满足使用 ES6 导入语法的要求？jquerysemantic-ui
我应该从目录还是从我的目录导入（我复制所有内容的地方）？node_modules/dist/

答案 1

索引.js

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

首先，正如@nem注释中建议的那样，导入应从以下位置完成：node_modules/

好吧，从导入没有意义，因为这是您的分发文件夹，其中包含生产就绪的应用程序。构建您的应用程序应该获取其中的内容并将其添加到文件夹（包括jQuery）中。dist/node_modules/dist/

接下来，glob –- 是错误的，因为我知道我要导入的对象（例如 and ），所以一个直接的 import 语句将起作用。* asjQuery$

最后，您需要使用 .window.$ = $

然后，我同时导入并涵盖所有用法，删除导入重复，因此这里没有开销！^o^y$jQuerybrowserify

答案 2

基于爱德华·洛佩兹的解决方案，但有两行：

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