如何使用ES6语法导入jquery？

128

我正在ES6通过babelTranspiler和preset-es2015插件以及semantic-ui样式使用（JavaScript）语法编写一个新应用程序。

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语法。

  • 如何导入jquery才能semantic-ui使用ES6导入语法？
  • 我应该从node_modules/目录中导入还是从我的目录dist/中复制所有内容？
javascript  jquery  ecmascript-6  browserify  semantic-ui 
— 爱德华·洛佩兹
source
2
好吧，从那里导入dist是没有意义的，因为那是带有生产就绪应用程序的分发文件夹。构建应用程序应使用节点模块内部的内容，并将其添加到dist文件夹（包括jQuery）中。
— nem035 2015年
从scss文件导入也不会。除非有一些很棒的插件，否则我会错过！
— CodingIntrigue 2015年
@RGraham它称为sassify，一个浏览器插件。我启发了自己的精髓
— 爱德华·洛佩兹
我会检查一下，谢谢！
— CodingIntrigue 2015年
@RGraham-语法看起来很奇怪，但是通过webpack + babel这样的构建工具鼓励对CSS / SASS文件使用“ require”。例如。require（“ ../ node_modules / bootstrap / dist / css / bootstrap.min.css”）;
— arcseldon

Answers:

129

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和$），因此可以使用straigforward import语句。

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

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

— 爱德华·洛佩兹
source
6
不知道是否还有其他人，但是您可以解释对的需求window.$ = $。我不明白为什么需要这样做。js当browserify神奇时，其他脚本不会自动捆绑到单个脚本中吗？
— qarthandso '16
13
为什么不只是拥有import {$,jQuery} from 'jquery';？为什么要进口那么多？
— 杰基
4
您如何找到名称的确切类名，即jQuery？
— 阿维纳什·拉吉
13
我要么得到，Module '"jquery"' has no exported member 'jQuery'要么Module '"jquery"' has no default export我想念什么？
— daslicht '16
4
较旧版本的jQuery不使用命名导出。较新的版本。导入方法取决于您使用的jQuery版本。
— pmont
55

基于ÉdouardLopez的解决方案，但有两行内容：

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
— ha7ilm
source
2
这对我有用，而可接受的答案方法却不……我使用了很多相同的方法：从'jquery'导入$；window.jQuery = $; window。$ = $;
— arcseldon'9
3
一线：window.$ = window.jQuery = require('jquery');
— Nabil Baadillah
2
@NabilBaadillah require（CommonJS）不是import（ES模块），单行似乎无法使用import。（有人在乎吗？）
— Nicolas Le Thierry d'Ennequin
13

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

import * as $ from 'jquery';

现在，$属于window对象。

— 伊万·赫兹（Ivan Hertz）
source
1
这对我有用。顶部“从'jquery'导入{jQuery as $};” 给出错误消息“找不到jQuery”。
— SpaceMonkey
12

您可以创建如下所示的模块转换器：

// jquery.module.js
import 'https://code.jquery.com/jquery-3.3.1.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

— 尤库莱莱
source
1
这帮助了！我通常喜欢在使用任何IDE / DevEnv之前尝试一些基础知识。在不使用Node / NPM / Babble的情况下，我想了解ES6的导入和导出。我设法完成了基本的导入和导出工作，但一直在努力将jQuery包含在内。我将自定义代码编写为模块，但使用html中的script标签以传统方式引用jquery。因此，我最终得到了2个脚本标签，一个包含jquery，另一个包含app.js。有了您的回答，我可以摆脱我的第一个jquery脚本标记，并按照您的建议使用中间jquery.module.js。
— sidnc86 '19
9

接受的答案对我不起作用
注意：使用汇总js不知道此答案是否
在
npm 之后属于我-
在custom.js中保存jquery

import {$, jQuery} from 'jquery';

要么

import {jQuery as $} from 'jquery';

我收到错误消息：Module ... node_modules / jquery / dist / jquery.js不导出jQuery
或
Module ... 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');
});
— 里丁
source
它看起来像namedExports没有在CommonJS的存在了插件
— 萨科Hoizey
7

如果可以帮助任何人，则将挂起javascript import语句。因此，如果库在全局名称空间（窗口）中对jquery具有依赖项（例如，引导程序），则将无法使用：

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

这是因为在将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

— 克雷格·迈克尔·马丁
source
6

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

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
— 穆罕默德·雷达（Muhammad Reda）
source
4
这种方法的优点是什么？因为您将自己绑定到此处的构建工具。
— 爱德华·洛佩兹
这是我让它工作的唯一方法。我试过import {$, jQuery} from 'jquery';但id无效，我相信是因为在其他模块中未定义（导入）它。
— 穆罕默德·雷达
2
对于Webpack用户而言，这是最佳的解决方案，因为jQuery应该在所有文件中全局可用，而无需冗余的import语句。
— 阿米尔
1 
import {jQuery as $} from 'jquery';
— Farsheed
source
1
它说找不到jQuery。另一个答案是“将*从'jquery'导入为$。”。你知道为什么会这样吗？我要导入jquery的JS文件是Angular / Typescript文件的一部分
— SpaceMonkey，
1

如果您没有使用任何JS构建工具/ NPM，则可以直接将Jquery包括为： 

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

如果您已经使用标题下面的脚本标签包含了jquery，则可以跳过import（第1行）。

— VNN456
source
我不知道为什么，但是当没有其他人这样做时，这个人对我有用。除了裸露以外的任何导入语句都import 'filepath/jquery.js'引发了一些错误：模块不能导出我想要的函数，或$不是一个函数，或只是一个字眼上的SyntaxError from。
— 银河番茄酱
0

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

— wt
source
0

导入jQuery（我使用“ npm install jquery@1.9.1”安装了）

import 'jquery/jquery.js';

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

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

或在导入后声明变量$

var $ = window.$
— 约瑟夫
source
0

我想使用已经构建好的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）
source
伊万·卡斯泰拉诺斯（Ivan Castellanos），您应该扩大自己的榜样，以更好地理解如何应用它
— north.inhale
0

您可以像这样导入

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});
— SlingEr。
source
0

我的项目堆栈是：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版本的错误和冲突

— 北吸入
source
0

如果您使用的是Webpack 4，答案是使用ProvidePlugin。他们的文档专门介绍了jquery用例的angular.js：

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

问题在于，当使用import语法angular.js和jquery时，始终将其导入，然后才有机会将jquery分配给window.jQuery（import无论代码在代码中的什么位置，语句始终会首先运行！）。这意味着除非您使用，否则angular始终会将window.jQuery视为未定义ProvidePlugin。

— 马丁·康尼
source
0

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

— 山姆·古迪
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.