如何使用 ES6 语法导入 jquery?
How to import jquery using ES6 syntax?
我正在通过 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/
(我复制所有内容的地方)导入?
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
基于 Édouard Lopez 的解决方案,但分为两行:
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 --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');
});
在全局范围内导入整个 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 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 };
您可以像下面这样创建一个模块转换器:
// 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>
我想使用 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)
你可以这样导入
import("jquery").then((jQuery) => {
window.$ = jQuery;
window.jQuery = jQuery;
import("bootstrap").then((_bs)=>{
$(function() {});
})
});
我的项目堆栈是: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版本的错误和冲突
如果你使用的是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
.
我还没有看到这个确切的语法发布,它在 ES6/Webpack 环境中对我有用:
import $ from "jquery";
直接取自jQuery's NPM page。希望这对某人有所帮助。
如果您没有使用任何 JS 构建 tools/NPM,那么您可以直接将 Jquery 添加为:
import 'https://code.jquery.com/jquery-1.12.4.min.js';
const $ = window.$;
如果您已经在 head 下使用脚本标签包含 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 = $
我正在通过 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/
(我复制所有内容的地方)导入?
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 insidenode_modules/
and add it to thedist/
folder, jQuery included.
接下来,glob –* as
– 是错误的,因为我知道我正在导入什么对象(例如 jQuery
和 $
),所以直接 import statement 会起作用。
最后您需要使用 window.$ = $
.
然后,我导入为 $
和 jQuery
以涵盖所有用法,browserify
删除导入重复,所以这里没有开销! ^o^y
基于 Édouard Lopez 的解决方案,但分为两行:
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 --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');
});
在全局范围内导入整个 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 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 };
您可以像下面这样创建一个模块转换器:
// 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>
我想使用 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)
你可以这样导入
import("jquery").then((jQuery) => {
window.$ = jQuery;
window.jQuery = jQuery;
import("bootstrap").then((_bs)=>{
$(function() {});
})
});
我的项目堆栈是: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版本的错误和冲突
如果你使用的是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
.
我还没有看到这个确切的语法发布,它在 ES6/Webpack 环境中对我有用:
import $ from "jquery";
直接取自jQuery's NPM page。希望这对某人有所帮助。
如果您没有使用任何 JS 构建 tools/NPM,那么您可以直接将 Jquery 添加为:
import 'https://code.jquery.com/jquery-1.12.4.min.js';
const $ = window.$;
如果您已经在 head 下使用脚本标签包含 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 = $