如何使用ES6语法导入jquery？
如何使用ES6语法导入jquery？
提问于 2015-12-17 23:35:55
我正在使用(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'));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语法。
- 如何使用从
node_modules/目录或我的dist/(复制everything)?
的位置)导入的semantic-ui导入ES6导入node_modules/以满足dist/要求
回答 18
Stack Overflow用户
回答已采纳
发布于 2015-12-18 01:10:00
index.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和$)，所以一个简单的import statement就可以了。
最后，您需要使用window.$ = $将其公开给其他脚本。
然后，我导入为$和jQuery以涵盖所有用法，browserify删除了导入重复，所以这里没有开销！^o^y
Stack Overflow用户
发布于 2017-02-11 20:00:53
基于的解决方案，但只有两行：
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;Stack Overflow用户
发布于 2018-10-16 06: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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34338411
复制相关文章
相似问题