如何使用 ES6 语法导入 jquery?

IT技术 javascript jquery ecmascript-6 browserify semantic-ui
2021-01-21 19:01:54

我正在ES6通过babel转译器和preset-es2015插件以及semantic-ui样式使用(JavaScript)语法编写一个新应用程序

索引.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'));

索引.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/

包.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 语法。

  • 如何导入jquery以满足semantic-ui使用 ES6 导入语法?
  • 我应该从node_modules/目录导入还是从我的dist/(我复制所有内容的地方)导入
6个回答

索引.js

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

首先,正如@nem在评论中建议的那样,导入应该从node_modules/

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

接下来,glob – * as– 是错误的,因为我知道我正在导入什么对象(例如 jQueryand $),所以直接导入语句将起作用。

最后,您需要使用window.$ = $.

然后,我同时导入$jQuery覆盖所有用法,browserify删除导入重复,所以这里没有开销!^o^y

我要么得到,Module '"jquery"' has no exported member 'jQuery'要么Module '"jquery"' has no default export我错过了什么?
2021-03-16 19:01:54
不确定你们是否还在,但你能解释一下window.$ = $. 我不明白为什么需要这样做。js当 browserify 很神奇时,其他脚本不会自动捆绑到单个脚本中吗?
2021-03-17 19:01:54
你如何找到名称确切的类名,即jQuery
2021-03-21 19:01:54
旧版本的 jQuery 不使用命名导出。较新的版本可以。导入方法取决于您使用的 jQuery 版本。
2021-03-25 19:01:54
为什么不只是有import {$,jQuery} from 'jquery';为什么进口这么多?
2021-04-10 19:01:54

基于 Édouard Lopez 的解决方案,但分为两行:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
这对我有用,而接受的答案方法没有......我使用了大致相同的: import $ from 'jquery'; window.jQuery = $;window.$ = $;
2021-03-12 19:01:54
一条线 : window.$ = window.jQuery = require('jquery');
2021-04-04 19:01:54
单线绝对是可能的: import jQuery from "jquery"; window.$ = window.jQuery = jQuery;
2021-04-05 19:01:54
@NabilBaadillah require(CommonJS)不是import(ES module)并且单线似乎不可能与import. (有人关心?)
2021-04-11 19:01:54

您可以创建一个module转换器,如下所示:

// 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!');
});

不要忘记将其作为module加载到文档中:

<script type='module' src='./script.js'></script>

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

对我来说,这是最好的清洁解决方案
2021-03-24 19:01:54
这个有帮助!我通常喜欢在使用任何 IDE/DevEnv 之前先尝试一下基础知识。在不使用 Node/NPM/Babble 的情况下,我想了解 ES6 的导入和导出。我已经设法让基本的导入和导出工作,但在 jquery 包含方面苦苦挣扎。我将自定义代码编写为module,但使用 html 中的脚本标记以传统方式继续引用 jquery。所以我最终有 2 个脚本标签,一个包含 jquery,另一个包含 app.js。有了你的回答,我就可以去掉我的第一个 jquery 脚本标签,并按照你的建议使用中间的 jquery.module.js。
2021-03-25 19:01:54

在全局范围内导入整个 JQuery 的内容。这会将 $ 插入当前范围,包含从 JQuery 导出的所有绑定。

import * as $ from 'jquery';

现在 $ 属于 window 对象。

我测试了上述所有代码,这对我有用。另外,我添加window.$ = window.jQuery = $;了那些在加载事件之前的代码
2021-03-21 19:01:54
这对我有用。顶部“从'jquery'导入{jQuery as $};” 给出一个错误,说找不到“jQuery”。
2021-03-31 19:01:54

接受的答案对我不起作用
注意:使用 rollup js不知道

npm i --save jquery
in custom.js之后这个答案是否属于这里

import {$, jQuery} from 'jquery';

或者

import {jQuery as $} from 'jquery';

我收到错误:module ...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'
};

包.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');
});
看起来namedExports在 commonjs 插件中不存在了
2021-04-08 19:01:54