如何使用 ES6语法导入 jquery？

我正在写一个新的应用程序使用(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'));

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

  • 如何使用 ES6导入语法导入 jquery以满足 semantic-ui？
  • 我应该从 node_modules/目录导入还是从 dist/(我复制所有内容的地方)导入？
251792 次浏览
小开
最佳答案

Index.js

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

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

从 dist/导入是没有意义的，因为这是您的发行文件夹与生产准备应用程序。构建你的应用程序应该将 node_modules/中的内容添加到 dist/文件夹中，包括 jQuery。

接下来，globb-* as-是错误的，因为我知道我正在导入什么对象(例如:。jQuery和 $) ，所以一个简单的 进口报表将工作。

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

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

小开

基于爱德华 · 洛佩兹的解决方案，但只有两句话:

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

首先，在 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

小开

接受的答案对我不起作用
注意: 使用 rollup js 不知道这个答案是否属于这里
之后
Npm i ——保存 jquery
在 custom.js < br/> 

import {$, jQuery} from 'jquery';

或者

import {jQuery as $} from 'jquery';

我正在接收 错误: Module... node _ Module/jQuery/dist/jQuery.js 不导出 < strong > jQuery
或者
Module... node _ Module/jquery/dist/jquery.js 不会导出 < strong > $
Js < br/> 

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

包裹 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 注入和 commjs 插件 < br/> 

import * as jQuery from 'jquery';

然后在海关

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

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

import * as $ from 'jquery';

现在 $属于 window 对象。

小开

导入 jquery (我是用‘ npm install jquery@1.9.1’安装的)

import 'jquery/jquery.js';

将所有依赖于 jquery 的代码放在这个方法中

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

或者在导入后声明变量 $

var $ = window.$
小开

Webpack 用户，添加以下到您的 plugins阵列。

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

如果有帮助的话，javascript 导入语句将被挂起。因此，如果一个库在全局名称空间(窗口)中对 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

小开

您可以创建如下模块转换器:

// 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

小开

我想使用已经构建好的 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)
小开

你可以像这样进口

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

我的项目堆栈是: ParcelJS + WordPress

WordPress 得到了 < em > jQuery v1.12.4 本身，我也导入了 < em > 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 版本的错误和冲突不再出现

小开

如果您正在使用 Webpack 4，那么答案是使用 ProvidePlugin:

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

问题在于，当使用 import语法时，angular.js 和 jquery 总是在你有机会将 jquery 分配给 window.jQuery 之前被导入(无论它们在代码中的哪个位置，import语句总是首先运行!).这意味着在使用 ProvidePlugin之前，angle 将始终看到 window.jQuery 是未定义的。

小开

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

import $ from "jquery";

直接取自 JQuery 的 NPM 页面希望能有所帮助。

小开

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

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

如果您已经在 head 下使用 script 标记包含了 jquery，那么可以跳过导入(第1行)。

小开

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

小开 
import $ from 'jquery'


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

提交答案