如何使用 ES6 语法导入 jquery？
[英]How to import jquery using ES6 syntax?
问题描述
我正在通过babel transpiler 和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'));
索引.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/（我复制所有内容）导入？
18 个解决方案
解决方案1
141 已采纳 2015-12-17 17:10:00
索引.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和$ ），因此直接导入语句将起作用。
最后，您需要使用window.$ = $将其公开给其他脚本。
然后，我导入$和jQuery以涵盖所有用法， browserify删除导入重复，所以这里没有开销！ ^o^y
解决方案2
62 2017-02-11 12:00:52
基于 Édouard Lopez 的解决方案，但分为两行：
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
解决方案3
22 2018-10-15 22:54:42
您可以创建一个模块转换器，如下所示：
// 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>
解决方案4
15 2017-07-07 02:04:07
在全局范围内导入整个 JQuery 的内容。 这会将 $ 插入当前范围，包含从 JQuery 导出的所有绑定。
import * as $ from 'jquery';
现在 $ 属于 window 对象。
解决方案5
9 2017-04-21 15:43:18
接受的答案对我不起作用
注意：使用 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 不导出$
汇总配置文件
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",
},
这有效：
删除了汇总注入和 commonjs 插件
import * as jQuery from 'jquery';
然后在 custom.js
$(function () {
console.log('Hello jQuery');
});
解决方案6
8 2017-07-20 19:53:13
webpack 用户，将以下内容添加到您的plugins数组中。
let plugins = [
// expose $ and jQuery to global scope.
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
];
解决方案7
8 2018-07-10 18:25:19
如果它对任何人有帮助，就会提升 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 };
解决方案8
6 2020-03-12 15:58:06
解决方案9
3 2020-05-04 18:32:38
如果您没有使用任何 JS 构建工具/NPM，那么您可以直接将 Jquery 包含为：
import 'https://code.jquery.com/jquery-1.12.4.min.js';
const $ = window.$;
如果您已经在 head 下使用 script 标签包含了 jquery，则可以跳过导入（第 1 行）。
解决方案10
1 2017-09-17 22:23:58
import {jQuery as $} from 'jquery';
解决方案11
0 2017-03-28 14:51:08
首先，将它们安装并保存在 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
解决方案12
0 2017-07-18 19:01:03
导入 jquery（我用 'npm install jquery@1.9.1' 安装）
import 'jquery/jquery.js';
将所有依赖于 jquery 的代码放在此方法中
+function ($) {
// your code
}(window.jQuery);
或在导入后声明变量 $
var $ = window.$
解决方案13
0 2018-11-18 01:38:12
我想使用 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)
解决方案14
0 2019-11-06 02:45:23
你可以像这样导入
import("jquery").then((jQuery) => {
window.$ = jQuery;
window.jQuery = jQuery;
import("bootstrap").then((_bs)=>{
$(function() {});
})
});
解决方案15
0 2019-11-14 12:02:14
我的项目栈是： 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版本的错误和冲突
解决方案16
0 2020-02-10 20:45:01
如果您使用的WebPack 4，答案是使用ProvidePlugin 。 他们的文档特别涵盖了 angular.js 和 jquery用例：
new webpack.ProvidePlugin({
'window.jQuery': 'jquery'
});
问题是，当使用import语法时，angular.js 和 jquery 总是会在您有机会将 jquery 分配给 window.jQuery 之前被导入（ import语句将始终首先运行，无论它们在代码中的什么位置！）。 这意味着 angular 将始终将 window.jQuery 视为未定义，直到您使用ProvidePlugin 。
解决方案17
0 2020-07-19 12:26:30
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';
解决方案18
0 2022-01-14 01:33:17
import $ from 'jquery'
// export for others scripts to use
window.$ = window.jQuery = $
如何使用ES6语法导入jQuery UI并使用browserify？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.