如何使用 ES6 语法导入 jquery？

Question

我正在通过 babel 转译器和 preset-es2015 插件以及 semantic-ui 使用 (JavaScript) ES6 语法编写一个新应用为风格。

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/（我复制所有内容的地方）导入？

Answer 1

index.js

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

首先，正如 @nem 在评论中建议的那样，应该从 node_modules/:

进行导入

Well, importing from dist/ doesn't make sense since that is your distribution folder with production ready app. Building your app should take what's inside node_modules/ and add it to the dist/ folder, jQuery included.

接下来，glob –* as– 是错误的，因为我知道我正在导入什么对象（例如 jQuery 和 $ )，所以直接 import statement 会起作用。

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

将其公开给其他脚本

然后，我导入为 $ 和 jQuery 以涵盖所有用法，browserify 删除导入重复，所以这里没有开销！ ^o^y

Answer 2

基于 Édouard Lopez 的解决方案，但分为两行：

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

Answer 3

首先，安装并保存在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

Answer 4

接受的答案对我不起作用
注意：使用 rollup js 不知道这个答案是否属于这里
之后
npm i --save 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",
  },

这有效：
移除了 rollup inject 和 commonjs 插件

import * as jQuery from 'jquery';

然后在custom.js

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

Answer 5

在全局范围内导入整个 JQuery 的内容。这会将 $ 插入当前范围，包含从 JQuery.

导出的所有绑定

import * as $ from 'jquery';

现在 $ 属于 window 对象。

Answer 6

导入jquery（我用'npm install jquery@1.9.1'安装）

import 'jquery/jquery.js';

将所有依赖于 jquery 的代码放入此方法中

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

或在导入后声明变量$

var $ = window.$

Answer 7

webpack 用户，将以下内容添加到您的 plugins 数组中。

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

Answer 8

import {jQuery as $} from 'jquery';

Answer 9

如果对任何人有帮助，javascript import 语句将被提升。因此，如果库在全局命名空间 (window) 中对 jquery 具有依赖性（例如 bootstrap），这将不起作用：

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

这是因为 bootstrap 的导入在 jQuery 附加到 window 之前被提升和评估。

解决这个问题的一种方法是不直接导入 jQuery，而是导入一个本身导入 jQuery 并将其附加到 window.[=15= 的模块]

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 };

EG，https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js

Answer 10

您可以像下面这样创建一个模块转换器：

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

这将删除由 jQuery（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

Answer 11

我想使用 alread-buildy jQuery（来自 jquery.org），这里提到的所有解决方案都不起作用，我解决这个问题的方法是添加以下行，这应该使它几乎适用于所有环境：

 export default  ( typeof module === 'object' && module.exports && typeof module.exports.noConflict === 'function' )
    ? module.exports.noConflict(true)
    : ( typeof window !== 'undefined' ? window : this ).jQuery.noConflict(true)

Answer 12

你可以这样导入

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});

Answer 13

我的项目堆栈是：ParcelJS + WordPress

WordPress 获得了 jQuery v1.12.4 本身，我还导入了 jQuery v3^ 作为其他依赖模块的模块以及 bootstrap/js/dist/collapse，例如...不幸的是，我不能只留下一个 jQuery 版本由于其他 WordPress 模块化依赖项。当然，两个 jquery 版本之间会发生冲突。另外请记住，我们为这个项目提供了两种模式运行 Wordpress(Apache) / ParcelJS (NodeJS)，让一切变得有点困难。所以在解决这个冲突时正在寻找，有时项目在左边，有时在右边。所以...我的最终解决方案（我希望如此...）是：

    import $ from 'jquery'
    import 'popper.js'
    import 'bootstrap/js/dist/collapse'
    import 'bootstrap/js/dist/dropdown'
    import 'signalr'

    if (typeof window.$ === 'undefined') {
        window.$ = window.jQ = $.noConflict(true);
    }

    if (process) {
        if (typeof window.jQuery === 'undefined') {
            window.$ = window.jQuery = $.noConflict(true);
        }
    }

    jQ('#some-id').do('something...')    

    /* Other app code continuous below.......... */

我自己还是不明白，但是这个方法很管用。不再出现两个jQuery版本的错误和冲突

Answer 14

如果你使用的是Webpack 4，答案是使用ProvidePlugin。他们的 documentation specifically covers angular.js with jquery 用例：

new webpack.ProvidePlugin({
  'window.jQuery': 'jquery'
});

问题是，当使用 import 语法时，angular.js 和 jquery 将始终在您有机会将 jquery 分配给 window.jQuery 之前导入（import 语句总是运行最先，无论它们在代码中的什么位置！）。这意味着 angular 将始终将 window.jQuery 视为未定义，直到您使用 ProvidePlugin.

Answer 15

我还没有看到这个确切的语法发布，它在 ES6/Webpack 环境中对我有用：

import $ from "jquery";

直接取自jQuery's NPM page。希望这对某人有所帮助。

Answer 16

如果您没有使用任何 JS 构建 tools/NPM，那么您可以直接将 Jquery 添加为：

import  'https://code.jquery.com/jquery-1.12.4.min.js';
const $ = window.$;

如果您已经在 head 下使用脚本标签包含 jquery，您可以跳过导入（第 1 行）。

Answer 17

Pika 是一个 CDN，负责提供流行软件包的模块版本

<script type='module'>
    import * as $ from 'https://cdn.skypack.dev/jquery';

    // use it!
    $('#myDev').on('click', alert);
</script>

Skypack 是 Pika，所以你也可以使用：import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

Answer 18

import $ from 'jquery'

// export for others scripts to use
window.$ = window.jQuery = $

如何使用 ES6 语法导入 jquery？

How to import jquery using ES6 syntax?

javascript

jquery

ecmascript-6

browserify

semantic-ui

index.js

index.html

项目结构

package.json

问题

index.js