Question

我正在通过ES6转发器和babel插件使用（JavaScript）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/（我复制所有内容）进行导入？

Answer 1

index.js

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

首先，在评论中建议 @nem ，导入应该从node_modules/完成：

好吧，从dist/导入没有意义，因为那是带有生产就绪应用的分发文件夹。构建应用程序应该使用node_modules/中的内容并将其添加到包含jQuery的dist/文件夹中。

接下来，glob - * as - 错了，因为我知道我导入了什么对象（例如 jQuery和$），所以一个直截了当的import statement会起作用。

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

然后，我导入$和jQuery以涵盖所有用法，browserify删除导入重复，因此这里没有开销！ ^ O ^ý

Answer 2

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

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

Answer 3

接受的答案对我不起作用 注意：使用汇总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", },

这有效：
删除了汇总注入和commonjs插件

import * as jQuery from 'jquery';

然后在custom.js中

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

Answer 4

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

import * as $ from 'jquery';

现在$属于窗口对象。

Answer 5

您可以创建如下所示的模块转换器：

// jquery.module.js
import 'https://code.jquery.com/jquery-3.3.1.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>

http://plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=preview

Answer 6

如果可以帮助任何人，则将挂起javascript import语句。因此，如果库在全局名称空间（窗口）中对jquery具有依赖项（例如，引导程序），则将不起作用：

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
import 'bootstrap/dist/js/bootstrap.min';

这是因为在将jQuery附加到窗口之前，已启动并评估了bootstrap的导入。

解决此问题的一种方法是不直接导入jQuery，而是导入一个本身导入jQuery并将其附加到窗口的模块。

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;

EG，https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js

Answer 7

webpack用户，将以下内容添加到您的onRowPress = () => { this.props.navigation.navigate... }数组中。

plugins

Answer 8

如果您不使用任何JS构建工具/ NPM，则可以直接将Jquery包含为：

import  'https://code.jquery.com/jquery-1.12.4.min.js';
const $ = window.$;

如果您已经使用标题下面的脚本标签包含了jquery，则可以跳过import（第1行）。

Answer 9

import {jQuery as $} from 'jquery';

Answer 10

我还没有看到确切的语法，它在ES6 / Webpack环境中对我有用：

import $ from "jquery";

直接来自jQuery's NPM page。希望这对某人有帮助。

Answer 11

导入jquery（我安装了＆＃39; npm install jquery@1.9.1'）

import 'jquery/jquery.js';

将依赖于jquery的所有代码放在此方法中

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

或在导入后声明变量$

var $ = window.$

Answer 12

首先，安装并保存在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

Answer 13

我想使用已经构建好的jQuery（来自jquery.org），这里提到的所有解决方案都行不通，我解决此问题的方法是添加以下几行，使其几乎可以在所有环境下工作： / p>

Ranking || Highscore ||
1       ||  945      ||
2       ||  905      ||
3       ||  823      ||
4       ||  3457     ||
5       ||  2680     ||

Answer 14

您可以这样导入

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});

Answer 15

我的项目堆栈为： ParcelJS + WordPress

WordPress本身具有 jQuery v1.12.4 ，而且我还导入了 jQuery v3 ^ 作为其他模块依赖于模块以及bootstrap/js/dist/collapse，例如...不幸的是，由于其他WordPress模块依赖性，我不能只留下一个jQuery版本。当然，两个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版本的错误和冲突

Answer 16

如果您使用的是Webpack 4，答案是使用ProvidePlugin。他们的documentation specifically covers angular.js with jquery用例：

new webpack.ProvidePlugin({
  'window.jQuery': 'jquery'
});

问题在于，当使用import语法时，始终会导入angular.js和jquery，然后才有可能将jquery分配给window.jQuery（{import语句始终在任何位置运行它们在代码中！）。这意味着，除非您使用ProvidePlugin，否则angular始终将window.jQuery视为未定义。

Answer 17

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';

如何使用ES6语法导入jquery？

index.js

的index.html

项目结构

的package.json

问题

17 个答案:

index.js