如何使用ES6语法导入jQuery？

我正在使用（Javscript） ES6语法编写一个新的应用程序，通过babel transpiler和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语法。

  • 如何使用ES6导入语法导入jquery来满足semantic-ui ？
  • 我应该从node_modules/目录或我的dist/ （我复制一切）？

index.js 

 import {$,jQuery} from 'jquery'; // export for others scripts to use window.$ = $; window.jQuery = jQuery;

首先，如@nem在评论中所build议的，导入应该从node_modules/ ：

那么，从dist/import是没有意义的，因为这是你的分发文件夹与生产准备的应用程序。 build立你的应用程序应该采取什么里面node_modules/并将其添加到dist/文件夹，包括jQuery。

接下来，glob – * as – 是错误的，因为我知道我要导入的对象是什么（ 例如 jQuery和$ ），所以straigforward import语句将起作用。

最后，您需要使用window.$ = $将其公开给其他脚本window.$ = $ 。

然后，我导入$和jQuery来覆盖所有的用法， browserify删除导入重复，所以没有开销在这里！ ^ O ^ÿ

基于ÉdouardLopez的解决scheme，但分为两行： 

 import jQuery from "jquery"; window.$ = window.jQuery = jQuery;

接受的答案不适合我
注意：使用汇总js不知道这个答案是否属于这里
后
npm我 – 保存jquery
在custom.js中 

 import {$, jQuery} from 'jquery';

要么 

 import {jQuery as $} from 'jquery';

我得到错误 ：模块… node_modules / jquery / dist / jquery.js不导出jQuery
要么
Module … 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", },

这工作：
删除了汇总注入和commonjs插件 

 import * as jQuery from 'jquery';

然后在custom.js中 

 $(function () { console.log('Hello jQuery'); });

webpack用户，将下面的内容添加到你的plugins数组中。 

 let plugins = [ // expose $ and jQuery to global scope. new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ];

在全局范围内导入整个JQuery的内容。 这将$插入到当前作用域中，其中包含JQuery中所有导出的绑定。 

 import * as $ from 'jquery';

现在$属于窗口对象。 

 import {jQuery as $} from 'jquery';

首先，安装并保存在package.json中： 

 npm i --save jquery npm i --save jquery-ui-dist

其次，在webpackconfiguration中添加一个别名： 

 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

导入jquery（我用'npm install jquery@1.9.1'安装） 

 import 'jquery/jquery.js';

把所有依赖jQuery的代码放在这个方法里面 

 +function ($) { // your code }(window.jQuery);

或者在导入之后声明variables$ 

 var $ = window.$
Interesting Posts