如何使用ES6语法导入jQuery?
我正在使用(JavaScript)ES6
语法通过Babel
Transpiler和PRESET-ES2015
插件以及>
语义-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/
软件包。
…
"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}]
]
}
使用
经典&lt; script&gt;
标记导入到导入jquery
的工作正常,但是我正在尝试使用ES6语法。
- 如何使用ES6导入语法导入
jQuery
以满足smantic-ui
? - 我应该从
node_modules/
目录或我的dist/
(在哪里复制所有内容)导入?
I'm writing a new app using (JavaScript) ES6
syntax through babel
transpiler and the preset-es2015
plugins, as well as semantic-ui
for the style.
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>
Project structure
.
├── 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}]
]
}
Question
Using classic <script>
tag to import jquery
works fine, but I'm trying to use the ES6 syntax.
- How do I import
jquery
to satisfysemantic-ui
using ES6 import syntax? - Should I import from the
node_modules/
directory or mydist/
(where I copy everything)?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(19)
index.js
首先,如 @nem 在评论中建议的,应从
node_modules/
中进行导入:接下来,全球 -
* AS
- 我知道要导入的对象( egjquery
和$ ),所以一个stragforward 会起作用。
最后,您需要使用
窗口。$ = $
将其公开为其他脚本。然后,我将同时导入
$
和jQuery
要涵盖所有用法,browserify
删除导入重复,因此在这里没有开销! ^o^yindex.js
First, as @nem suggested in comment, the import should be done from
node_modules/
:Next, the glob –
* as
– is wrong as I know what object I'm importing (e.g.jQuery
and$
), so a straigforward import statement will work.Last you need to expose it to other scripts using the
window.$ = $
.Then, I import as both
$
andjQuery
to cover all usages,browserify
remove import duplication, so no overhead here! ^o^y基于ÉdouardLopez的解决方案,但分为两行:
Based on the solution of Édouard Lopez, but in two lines:
您可以创建如下所示的模块转换器:
这将删除 jQuery 引入的全局变量 (
jQuery
&$
) 并默认导出 jQuery 对象。然后在脚本中使用它:
不要忘记将其作为文档中的模块加载:
http:// /plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=预览
You can create a module converter like below:
This will remove global variables introduced by jQuery (
jQuery
&$
) and export jQuery object as default.Then use it in your script:
Do not forget to load it as a module in your document:
http://plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=preview
导入全局范围内的整个 JQuery 内容。这会将 $ 插入当前范围,其中包含从 JQuery 导出的所有绑定。
现在$属于window对象。
Import the entire JQuery's contents in the Global scope. This inserts $ into the current scope, containing all the exported bindings from the JQuery.
Now the $ belongs to the window object.
如果它对任何人有帮助,javascript import 语句就会被提升。因此,如果一个库在全局命名空间(window)中对jquery有依赖(例如bootstrap),那么这将不起作用:
这是因为bootstrap的导入在jQuery附加到window之前被提升和评估。
解决这个问题的一种方法是不直接导入 jQuery,而是导入一个模块,该模块本身导入 jQuery 并将其附加到窗口。
其中
leaked-jquery
看起来像EG,https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js
If it helps anyone, javascript import statements are hoisted. Thus, if a library has a dependency (eg bootstrap) on jquery in the global namespace (window), this will NOT work:
This is because the import of bootstrap is hoisted and evaluated before jQuery is attached to window.
One way to get around this is to not import jQuery directly, but instead import a module which itself imports jQuery AND attaches it to the window.
where
leaked-jquery
looks likeEG, https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js
WebPack用户,将下面添加到您的
插件
数组中。webpack users, add the below to your
plugins
array.接受的答案对我不起作用
注意:使用 rollup js 不知道这个答案是否属于这里
之后
npm i --保存 jquery
在 custom.js
或
中我收到错误:
模块 ...node_modules/jquery/dist/jquery.js 不导出 jQuery
或
模块 ...node_modules/jquery/dist/jquery.js 不导出 $
rollup.config.js
而不是汇总注入,尝试
package.json
这有效:
删除了 rollup 注入和 commonjs 插件
然后在 custom.js
The accepted answer did not work for me
note : using rollup js dont know if this answer belongs here
after
npm i --save jquery
in custom.js
or
i was getting error :
Module ...node_modules/jquery/dist/jquery.js does not export jQuery
or
Module ...node_modules/jquery/dist/jquery.js does not export $
rollup.config.js
instead of rollup inject, tried
package.json
This worked :
removed the rollup inject and commonjs plugins
then in custom.js
我尚未看到此确切的语法发布,并且在ES6/WebPack环境中对我有用:
直接从 jQuery的NPM页。希望这对某人有帮助。
I did not see this exact syntax posted yet, and it worked for me in an ES6/Webpack environment:
Taken directly from jQuery's NPM page. Hope this helps someone.
皮卡(Pika)是一种CDN,负责提供流行包的模块版本
Skypack是Pika,因此您也可以使用:
import * as $ as $ as $ as $ as $ suf'https://cdn.pika.dev/jquery@jequery@^ 3.5.1'' ;
Pika is a CDN that takes care of providing module versions of popular packages
Skypack is Pika, so you could also use:
import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';
如果您没有使用任何 JS 构建工具/NPM,那么您可以直接包含 Jquery,如下所示:
如果您已经使用 head 下的 script 标签包含了 jquery,则可以跳过导入(第 1 行)。
If you are not using any JS build tools/NPM, then you can directly include Jquery as:
You may skip import(Line 1) if you already included jquery using script tag under head.
我的项目堆栈是: ParcelJS + WordPress
WordPress 本身获得了 jQuery v1.12.4 并且我还导入了 jQuery v3^ 作为其他依赖模块以及
bootstrap/js/dist/collapse
的模块,例如...不幸的是,我不能只留下一个 jQuery 版本,因为其他 WordPress 模块化依赖项。当然,两个 jquery 版本之间会出现冲突。另请记住,我们为运行 Wordpress(Apache) / ParcelJS (NodeJS) 的项目提供了两种模式,这让一切变得有点困难。因此,在寻找这种冲突的解决方案时,有时项目在左侧崩溃,有时在右侧崩溃。
所以...我的最终解决方案(我希望如此...)是:
我仍然不明白自己是如何做到的,但这种方法有效。两个 jQuery 版本的错误和冲突不再出现
My project stack is: ParcelJS + WordPress
WordPress got jQuery v1.12.4 itself and I have also import jQuery v3^ as module for other depending modules as well as
bootstrap/js/dist/collapse
, for example... Unfortunately, I can’t leave only one jQuery version due to other WordPress modular dependencies.And ofcourse there is conflict arises between two jquery version. Also keep in mind we got two modes for this project running Wordpress(Apache) / ParcelJS (NodeJS), witch make everything little bit difficulty. So at solution for this conflict was searching, sometimes the project broke on the left, sometimes on the right side.
SO... My finall solution (I hope it so...) is:
I still didn’t understand how myself, but this method works. Errors and conflicts of two jQuery version no longer arise
接受的答案显示了如何静态导入jQuery。
但是,jQuery是一个大包装,我们通常只想在需要时加载。因此,为了完整性,以下是在功能中动态加载jQuery的方法:
The accepted answer shows how to import jQuery statically.
However, jQuery is a big package and we often want to load only if or when it's needed. So, for completeness, here's how to load jQuery dynamically e.g. within a function:
首先,安装并将它们保存在 package.json 中:
其次,在 webpack 配置中添加别名:
它对我来说适用于最后一个 jquery(3.2.1) 和 jquery-ui(1.12.1)。
有关详细信息,请参阅我的博客: http: //code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html
First of all, install and save them in package.json:
Secondly, add a alias in webpack configuration:
It work for me with the last jquery(3.2.1) and jquery-ui(1.12.1).
See my blog for detail: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html
continue
Import jquery (I installed with 'npm install [email protected]')
Put all your code that depends on jquery inside this method
or declare variable $ after import
我想使用 alread-buildy jQuery(来自 jquery.org),但这里提到的所有解决方案都不起作用,我解决此问题的方法是添加以下几行,这应该使其适用于几乎所有环境:
I wanted to use the alread-buildy jQuery (from jquery.org) and all the solutions mentioned here didn't work, how I fixed this issue was adding the following lines which should make it work on nearly every environment:
你可以这样导入
You can import like this
如果您使用的是WebPack 4,答案是使用
supplyplugin
。他们的 documentation> documentation> documentation> documentation of jquerar.js jquery.js A>用例:问题是,使用
import
语法angular.js和jQuery时,将始终导入在您有机会将jQuery分配给window.jquery.jquery(import> import
)之前。语句无论在代码中何处都将首先运行!)。这意味着Angular将始终看到窗口。jQuery as Undefined直到您使用supplyplugin
。If you are using Webpack 4, the answer is to use the
ProvidePlugin
. Their documentation specifically covers angular.js with jquery use case:The issue is that when using
import
syntax angular.js and jquery will always be imported before you have a chance to assign jquery to window.jQuery (import
statements will always run first no matter where they are in the code!). This means that angular will always see window.jQuery as undefined until you useProvidePlugin
.