如何使用 ES6 语法导入 jquery？

Posted 2023-02-22

技术标签:

【中文标题】如何使用 ES6 语法导入 jquery？【英文标题】：How to import jquery using ES6 syntax? 【发布时间】：2016-03-24 03:31:44 【问题描述】：

我正在编写一个新应用程序，使用 (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/

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

【问题讨论】：

好吧，从dist 导入没有意义，因为那是您的分发文件夹，其中包含生产就绪应用程序。构建您的应用程序应该获取节点模块内的内容并将其添加到 dist 文件夹，包括 jQuery。也不从 scss 文件导入。除非我错过了一些很棒的插件！ @RGraham 它被称为sassify，一个browserify 插件。我从oncletom gist 启发了自己我会检查一下，谢谢！ @RGraham - 语法看起来很奇怪，但是使用 webpack + babel 等构建工具鼓励对 css / sass 文件使用“require”。例如。要求（“../node_modules/bootstrap/dist/css/bootstrap.min.css”）； 【参考方案1】：

index.js

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

首先，正如 @nem 在评论中建议的那样，应该从node_modules/ 进行导入：

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

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

最后您需要使用window.$ = $ 将其公开给其他脚本。

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

【讨论】：

不确定你们是否还在，但您能解释一下window.$ = $ 的必要性吗？我不明白为什么需要这样做。当 browserify 很神奇时，其他脚本不会自动捆绑到单个 js 脚本中吗？为什么不只拥有import $,jQuery from 'jquery';？为什么进口这么多？如何找到确切的类名，即jQuery？我得到Module '"jquery"' has no exported member 'jQuery' 或Module '"jquery"' has no default export 请问我错过了什么？旧版本的 jQuery 不使用命名导出。较新的版本可以。导入的方法取决于您使用的 jQuery 版本。【参考方案2】：

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

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

【讨论】：

这对我有用，而公认的答案方法却没有……我用的差不多： import $ from 'jquery'; window.jQuery = $;window.$ = $; 一行：window.$ = window.jQuery = require('jquery'); @NabilBaadillah require (CommonJS) 不是 import (ES 模块)，而且 import 似乎无法实现单行。（有人在乎吗？）单线绝对可以：import jQuery from "jquery"; window.$ = window.jQuery = jQuery;【参考方案3】：

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

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

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

【讨论】：

这个有帮助！我通常喜欢在使用任何 IDE/DevEnv 之前尝试基础知识。在不使用 Node/NPM/Babble 的情况下，我想了解 ES6 的导入和导出。我设法让基本的导入和导出工作，但在 jquery 包含方面遇到了困难。我将自定义代码编写为模块，但使用 html 中的脚本标记以传统方式引用 jquery。所以我最终得到了 2 个脚本标签，一个包含 jquery，另一个包含 app.js。有了你的回答，我可以摆脱我的第一个 jquery 脚本标签，并按照你的建议使用中间 jquery.module.js。对我来说，这是最好的清洁解决方案【参考方案4】：

在全局范围内导入整个 JQuery 的内容。这会将 $ 插入当前范围，其中包含从 JQuery 导出的所有绑定。

import * as $ from 'jquery';

现在 $ 属于 window 对象。

【讨论】：

这对我有用。顶部“从 'jquery' 导入 jQuery as $;”给出一个错误说“jQuery”未找到。我测试了上述所有代码，这对我有用。另外，我为加载事件之前的那些代码添加了window.$ = window.jQuery = $;【参考方案5】：

接受的答案对我不起作用注意：使用汇总 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",
  ,

这行得通： 删除了汇总注入和 commonjs 插件

import * as jQuery from 'jquery';

然后在 custom.js

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

【讨论】：

看来namedExports 在 commonjs 插件中已经不存在了【参考方案6】：

如果它对任何人有帮助，javascript 导入语句就会被提升。因此，如果一个库在全局命名空间（窗口）中对 jquery 有依赖项（例如引导程序），这将不起作用：

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

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

解决此问题的一种方法是不直接导入 jQuery，而是导入一个模块，该模块本身会导入 jQuery 并将其附加到窗口。

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

【讨论】：

为什么有import jQuery from './util/leaked-jquery';而不是import $ from './util/leaked-jquery'; 如果我在泄漏的 jquery 文件中调用 log( window.$ )，它是未定义的。为什么？【参考方案7】：

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

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

【讨论】：

这种方法的优点是什么？因为您在这里将自己绑定到您的构建工具。这是我让它工作的唯一方法。我尝试了import $, jQuery from 'jquery';，但 id 不起作用，我相信是因为它没有在其他模块中定义（导入）。这是 webpack 用户的最佳解决方案，因为 jQuery 应该在所有文件中全局可用，没有多余的 import 语句。【参考方案8】：

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

import $ from "jquery";

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

【讨论】：

【参考方案9】：

如果你没有使用任何 JS 构建工具/NPM，那么你可以直接包含 Jquery 为：

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

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

【讨论】：

我不知道为什么，但是这个对我有用，而其他人没有。除了 import 'filepath/jquery.js' 之外的任何导入语句都会引发一些关于模块没有导出我想要的函数或 $ 不是函数或只是看到 from 一词的 SyntaxError 的错误。 @GalacticKetchup 我也同意，我的也工作了，而其他人没有。 @VNN456 请解释为什么使用 const $ = window.$ 因为在我的代码中它不会影响我是否包含该 const 的功能。所以可能有一些东西我在不知不觉中错过了不重新分配窗口对象。【参考方案10】：

import jQuery as $ from 'jquery';

【讨论】：

它说没有找到 jQuery。另一个答案是“import * as $ from 'jquery';”。你知道为什么会这样吗？我要导入 jquery 的 JS 文件是 Angular/Typescript 文件的一部分【参考方案11】：

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

【讨论】：

【参考方案12】：

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

【讨论】：

【参考方案13】：

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

import 'jquery/jquery.js';

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

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

或在导入后声明变量 $

var $ = window.$

【讨论】：

【参考方案14】：

我想使用 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)

【讨论】：

Ivan Castellanos 您应该扩展您的示例以更好地了解如何应用它【参考方案15】：

你可以这样导入

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

【讨论】：

【参考方案16】：

我的项目堆栈是：ParcelJS + WordPress

WordPress 有 jQuery v1.12.4 本身，我还导入 jQuery v3^ 作为其他模块依赖模块以及bootstrap/js/dist/collapse，例如...不幸的是，由于其他 WordPress 模块化依赖项，我不能只留下一个 jQuery 版本。当然，两个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版本的错误和冲突

【讨论】：

【参考方案17】：

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

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

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

【讨论】：

【参考方案18】：

import $ from 'jquery'

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

【讨论】：

以上是关于如何使用 ES6 语法导入 jquery？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 ES6 语法将 Firebase Firestore 导入 create-react-app 项目

如何本地搭建一个支持es6的import from 模块导入环境

如何在 Node.js 中使用 ES6 导入？ [复制]

如何将jQuery插件导入babel应用程序

如何使用 isparta 从业力的代码覆盖范围中排除第三方导入（如 jquery）？

如何从 ES6 模块导入默认和命名