Javascript 如何使用ES6语法导入jquery？

我正在编写一个新的应用程序，使用（JavaScript）

ES6

语法，通过

babel

transpiler和

preset-es2015

插件，以及该样式的

semantic ui

index.js index.html package.json 问题: 使用经典的

标记导入

jquery

效果很好，但我尝试使用ES6语法

• 如何使用ES6导入语法导入

  jquery

  以满足

  语义ui

• 我应该从

  节点\u modules/

  目录或我的

  dist/

  目录（复制所有内容的地方）导入吗

index.js 首先，正如注释中所建议的那样，应该从

节点\u模块/

进行导入：

---

嗯，从

dist/

导入是没有意义的，因为这是您的分发文件夹，具有生产就绪应用程序。构建应用程序时，应将

node\u modules/

中的内容添加到

dist/

文件夹中，包括jQuery

接下来，glob–

*as

–是错误的，因为我知道要导入什么对象（例如

jQuery

和

$

），所以straigforward可以工作

最后，您需要使用

窗口将其公开给其他脚本。$=$

---

然后，我将导入为

$

和

jQuery

以覆盖所有用法，

browserify

删除导入重复，因此这里没有开销^o^y

基于埃杜亚德·洛佩兹的解决方案，但有两行：

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

---

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

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

其次，在网页包配置中添加别名：

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）

---

有关详细信息，请参阅我的博客：

接受的答案对我不起作用
注意：使用rollup js不知道这个答案是否属于这里
在
之后 npm i—保存jquery
在custom.js中

import {$, jQuery} from 'jquery';

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

或

import {jQuery as $} from 'jquery';

我遇到了错误： 模块…节点\u modules/jquery/dist/jquery.js不导出jquery 或
模块…节点\u 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',
};

  "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({
   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

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

  "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中

import {$, jQuery} from 'jquery';

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

---

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

import * as $ from 'jquery';

现在，$属于窗口对象。

导入jquery（我是用'npm install'安装的jquery@1.9.1")

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

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

或在导入后声明变量$

var $ = window.$

---

webpack用户，将以下内容添加到

插件

数组中

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

---

如果它对任何人都有帮助，javascript导入语句将被挂起。因此，如果库在全局名称空间（窗口）中对jquery有依赖关系（如引导），则这将不起作用：

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

这是因为引导的导入是在jQuery连接到窗口之前提升和评估的

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

import jQuery from './util/leaked-jquery';
import 'bootstrap/dist/js/bootstrap.min';

其中

泄漏的jquery

看起来像

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
export default $;
export { jQuery };

---

例如，您可以创建一个模块转换器，如下所示：

//jquery.module.js
进口的https://code.jquery.com/jquery-3.6.0.min.js'
导出默认窗口.jQuery.noConflict（true）

这将删除jQuery引入的全局变量，并将jQuery对象导出为默认值

然后在脚本中使用它：

//script.js
从“/jquery.module.js”导入$；
$（函数（）{
$（'body'）.text（'youpi！'）；
});

不要忘记将其作为模块加载到文档中：

---

我想使用alread buildy jQuery（来自jQuery.org），但这里提到的所有解决方案都不起作用，我是如何解决这个问题的，我添加了以下几行代码，这几行代码应该可以使它在几乎所有环境下都能工作：

 export default  ( typeof module === 'object' && module.exports && typeof module.exports.noConflict === 'function' )
    ? module.exports.noConflict(true)
    : ( typeof window !== 'undefined' ? window : this ).jQuery.noConflict(true)

---

你可以这样导入

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

---

我的项目堆栈是：ParcelJS+WordPress

WordPress获得了jQuery v1.12.4本身，我还为其他依赖模块导入了jQuery v3^作为模块，例如，

bootstrap/js/dist/collapse>。。。不幸的是，由于其他WordPress模块依赖关系，我不能只保留一个jQuery版本。
当然，两个jquery版本之间会产生冲突。还请记住，这个项目运行Wordpress（Apache）/ParcelJS（NodeJS）时有两种模式，这使得一切都有点困难。因此，解决这一冲突的办法是寻找，有时项目在左侧中断，有时在右侧中断。
所以我的最终解决方案（我希望如此…）是：

从“jquery”导入$
导入“popper.js”
导入“bootstrap/js/dist/collapse”
导入“bootstrap/js/dist/dropdown”
输入“信号器”
如果（窗口的类型。$==“未定义”）{
window.$=window.jQ=$.noConflict（true）；
}
if（流程）{
if（typeof window.jQuery==‘未定义’）{
window.$=window.jQuery=$.noConflict（true）；
}
}
jQ（'someid'）。do（'something…'））
/*其他应用程序代码如下*/

我还是不明白自己是怎么做的，但这种方法是有效的。两个jQuery版本的错误和冲突不再出现
如果您使用的是Webpack4，答案是使用
ProvidePlugin
。它们的用例：

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

问题是，在使用
import
syntax angular.js和jquery时，在您有机会将jquery分配给window.jquery之前，将始终导入它们（
import
语句将始终首先运行，无论它们在代码中的何处！）。这意味着在使用之前，angular将始终将window.jQuery视为未定义
 export default  ( typeof module === 'object' && module.exports && typeof module.exports.noConflict === 'function' )
    ? module.exports.noConflict(true)
    : ( typeof window !== 'undefined' ? window : this ).jQuery.noConflict(true)

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

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

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

<script type='module'>
    import * as $ from 'https://cdn.skypack.dev/jquery';

    // use it!
    $('#myDev').on('click', alert);
</script>