如何使用ES6语法导入jquery？ [英] How to import jquery using ES6 syntax?
问题描述
我正在使用（Javscript） ES6 语法通过 babel transpiler和 preset-es2015 插件，以及 semantic-ui 的样式。
I'm writing a new app using (Javscript) ES6 syntax through babel transpiler and the preset-es2015 plugins, as well as semantic-ui for the style.
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
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
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}]
]
}
问题
使用经典 ;脚本> 要导入的标签 jquery 正常工作，但我正在尝试使用ES6语法。
Question
Using classic <script> tag to import jquery works fine, but I'm trying to use the ES6 syntax.
- 如何导入
jquery以满足semantic-ui使用ES6导入语法？ - 应该从
node_modules /目录或我的dist /（我复制一切）？
- How do I import
jqueryto satisfysemantic-uiusing ES6 import syntax? - Should I import from the
node_modules/directory or mydist/(where I copy everything)?
推荐答案
index.js
index.js
import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;
首先，由于注释中建议的 @nem ，导入应该完成从 node_modules / ：
First, as @nem suggested in comment, the import should be done from node_modules/:
那么从
dist /没有意义，因为这是您的分发文件夹与生产就绪的应用程序。构建您的应用程序应该采取node_modules /内部的内容，并将其添加到dist /文件夹中，包含jQuery。
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 - 是错误的，因为我知道我' m import（ eg jQuery 和 $ ），所以一个straigforward import语句。
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.
最后，您需要使用窗口将其公开给其他脚本$ = $ 。
然后，我以 $ 和 jQuery 导入所有用法， browserify 删除导入重复，所以没有开销这里！ ^ o ^ y
Then, I import as both $ and jQuery to cover all usages, browserify remove import duplication, so no overhead here! ^o^y
这篇关于如何使用ES6语法导入jquery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
