blocks|key|2677434|text|index.js|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2677435|import+{$,jQuery}+from+'jquery';
//+export+for+others+scripts+to+use
window.$+=+$;
window.jQuery+=+jQuery;|code-block|syntax|javascript|2677436|首先，正如@nem在评论中建议的那样，导入应该从node_modules/完成|offset|length|style|BOLD|CODE|2677437|从dist/导入是没有意义的，因为这是你的发布文件夹和生产就绪的应用程序。构建你的应用程序应该将node_modules/中的内容添加到dist/文件夹，包括jQuery。|2677438|2677439|接下来，glob+-*+as-是错误的，因为我知道我正在导入的是什么对象(例如jQuery和$)，所以一个简单的import+statement就可以了。|2677440|最后，您需要使用window.$+=+$将其公开给其他脚本。|2677441|然后，我导入为$和jQuery以涵盖所有用法，browserify删除了导入重复，所以这里没有开销！%5Eo%5Ey|2677442|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Syntax^0|0|0|5|4|O|D|0|1|5|1C|D|1W|5|0|0|A|4|13|6|1A|1|1K|G|0|0|8|C|0|7|1|9|6|N|A|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@$I|17|J|18|K|L]|$I|19|J|1A|K|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1B|8|@$I|1C|J|1D|K|M]|$I|1E|J|1F|K|M]|$I|1G|J|1H|K|M]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1J|8|@$I|1K|J|1L|K|M]|$I|1M|J|1N|K|M]|$I|1O|J|1P|K|M]]|9|@$I|1Q|J|1R|1|1S]]|A|$]]|$1|S|3|T|5|6|7|1T|8|@$I|1U|J|1V|K|M]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1W|8|@$I|1X|J|1Y|K|M]|$I|1Z|J|20|K|M]|$I|21|J|22|K|M]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|23|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<h3>index.js</h3>

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

First, as @nem suggested in comment, the import should be done from <code>node_modules/</code>:

<blockquote>
 Well, importing from <code>dist/</code> doesn't make sense since that is your distribution folder with production ready app. Building your app should take what's inside <code>node_modules/</code> and add it to the <code>dist/</code> folder, jQuery included.
</blockquote>

Next, the glob –<code>* as</code>– is wrong as I know what object I'm importing (e.g. <code>jQuery</code> and <code>$</code>), so a straigforward <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Syntax" rel="noreferrer">import statement</a> will work. 

Last you need to expose it to other scripts using the <code>window.$ = $</code>.

Then, I import as both <code>$</code> and <code>jQuery</code> to cover all usages, <code>browserify</code> remove import duplication, so no overhead here! ^o^y

blocks|key|2889028|text|基于的解决方案，但只有两行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2889029|import+jQuery+from+"jquery";
window.$+=+window.jQuery+=+jQuery;|code-block|syntax|javascript|2889030|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Based on the solution of Édouard Lopez, but in two lines:

<pre><code>import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
</code></pre>

blocks|key|121156|text|首先，在package.json中安装并保存它们：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|121157|npm+i+--save+jquery
npm+i+--save+jquery-ui-dist|code-block|syntax|javascript|121158|其次，在webpack配置中添加别名：|121159|resolve:+{
++root:+[
++++path.resolve(__dirname,+'../node_modules'),
++++path.resolve(__dirname,+'../src'),
++],
++alias:+{
++++'jquery-ui':+'jquery-ui-dist/jquery-ui.js'
++},
++extensions:+['',+'.js',+'.json'],
}|121160|它适用于我最近的jquery(3.2.1)和jquery-ui(1.12.1)。|121161|详情请看我的博客：http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html|offset|length|121162|entityMap|0|LINK|mutability|MUTABLE|url|http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html^0|0|0|0|0|0|9|24|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

First of all, install and save them in package.json:

<pre><code>npm i --save jquery
npm i --save jquery-ui-dist
</code></pre>

Secondly, add a alias in webpack configuration:

<pre><code>resolve: {
 root: [
 path.resolve(__dirname, '../node_modules'),
 path.resolve(__dirname, '../src'),
 ],
 alias: {
 'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
 },
 extensions: ['', '.js', '.json'],
}
</code></pre>

It work for me with the last jquery(3.2.1) and jquery-ui(1.12.1).

See my blog for detail: <a href="http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html" rel="nofollow noreferrer">http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html</a>

blocks|key|124065|text|这个被接受的答案对我不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124066|注意:使用汇总js不知道这个答案是否属于这里|offset|length|style|BOLD|124067|之后|124068|npm+i--保存jquery|124069|在custom.js中|124070|import+{$,+jQuery}+from+'jquery';|code-block|syntax|javascript|124071|或|124072|import+{jQuery+as+$}+from+'jquery';|124073|我收到错误模块:模块...node_modules/jquery/dist/jquery.js不能导出jQuery|124074|124075|模块...node_modules/jquery/dist/jquery.js不导出$|124076|rollup.config.js|124077|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',
};|124078|而不是rollup+inject，已尝试|124079|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'
};|124080|package.json|124081|++"devDependencies":+{
++++"babel-cli":+"%5E6.10.1",
++++"babel-core":+"%5E6.10.4",
++++"babel-eslint":+"6.1.0",
++++"babel-loader":+"%5E6.2.4",
++++"babel-plugin-external-helpers":+"6.18.0",
++++"babel-preset-es2015":+"%5E6.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":+"%5E2.0.0",
++++"rollup-plugin-node-resolve":+"2.0.0",
++++"rollup-plugin-uglify":+"1.0.1",
++++"uglify-js":+"2.7.0"
++},
++"scripts":+{
++++"build":+"rollup+-c",
++},|124082|成功了:|124083|删除了rollup注入和commonjs插件|124084|import+*+as+jQuery+from+'jquery';|124085|然后在custom.js中|124086|$(function+()+{
++++++++console.log('Hello+jQuery');
});|124087|entityMap^0|0|0|9|0|0|0|0|0|0|0|3|1I|0|0|1|0|0|17|0|0|G|0|0|0|K|0|0|0|C|0|0|0|4|0|0|M|0|0|0|D|0|0^^$0|@$1|2|3|4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1Q|8|@$D|1R|E|1S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1T|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1U|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1V|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1W|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1X|8|@]|9|@]|A|$]]|$1|U|3|V|5|P|7|1Y|8|@]|9|@]|A|$Q|R]]|$1|W|3|X|5|6|7|1Z|8|@$D|20|E|21|F|G]]|9|@]|A|$]]|$1|Y|3|T|5|6|7|22|8|@$D|23|E|24|F|G]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|25|8|@$D|26|E|27|F|G]]|9|@]|A|$]]|$1|11|3|12|5|6|7|28|8|@$D|29|E|2A|F|G]]|9|@]|A|$]]|$1|13|3|14|5|P|7|2B|8|@]|9|@]|A|$Q|R]]|$1|15|3|16|5|6|7|2C|8|@$D|2D|E|2E|F|G]]|9|@]|A|$]]|$1|17|3|18|5|P|7|2F|8|@]|9|@]|A|$Q|R]]|$1|19|3|1A|5|6|7|2G|8|@$D|2H|E|2I|F|G]]|9|@]|A|$]]|$1|1B|3|1C|5|P|7|2J|8|@]|9|@]|A|$Q|R]]|$1|1D|3|1E|5|6|7|2K|8|@$D|2L|E|2M|F|G]]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|2N|8|@$D|2O|E|2P|F|G]]|9|@]|A|$]]|$1|1H|3|1I|5|P|7|2Q|8|@]|9|@]|A|$Q|R]]|$1|1J|3|1K|5|6|7|2R|8|@$D|2S|E|2T|F|G]]|9|@]|A|$]]|$1|1L|3|1M|5|P|7|2U|8|@]|9|@]|A|$Q|R]]|$1|1N|3|-4|5|6|7|2V|8|@]|9|@]|A|$]]]|1O|$]]

The accepted answer did not work for me 
note : using rollup js dont know if this answer belongs here 
after 
npm i --save jquery 
in custom.js 

<pre><code>import {$, jQuery} from 'jquery';
</code></pre>

or 

<pre><code>import {jQuery as $} from 'jquery';
</code></pre>

i was getting error :
Module ...node_modules/jquery/dist/jquery.js does not export jQuery 
or 
Module ...node_modules/jquery/dist/jquery.js does not export $ 
rollup.config.js 

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

instead of rollup inject, tried 

<pre><code>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'
};
</code></pre>

package.json 

<pre><code> "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",
 },
</code></pre>

This worked : 
removed the rollup inject and commonjs plugins 

<pre><code>import * as jQuery from 'jquery';
</code></pre>

then in custom.js 

<pre><code>$(function () {
 console.log('Hello jQuery');
});
</code></pre>

blocks|key|2889284|text|在Global作用域中导入整个JQuery内容。这会将$插入到当前作用域中，其中包含从JQuery导出的所有绑定。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2889285|import+*+as+$+from+'jquery';|code-block|syntax|javascript|2889286|现在，$属于window对象。|2889287|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Import the entire JQuery's contents in the Global scope. This inserts $ into the current scope, containing all the exported bindings from the JQuery.

<pre><code>import * as $ from 'jquery';
</code></pre>

Now the $ belongs to the window object.

blocks|key|2677664|text|导入jquery+(我是用'npm+install+jquery@1.9.1‘安装的)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2677665|import+'jquery/jquery.js';|code-block|syntax|javascript|2677666|将所有依赖于jquery的代码放在此方法中|2677667|%2Bfunction+($)+{+
++++//+your+code
}(window.jQuery);|2677668|或在导入后声明变量$|2677669|var+$+=+window.$|2677670|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Import jquery (I installed with 'npm install jquery@1.9.1')

<pre><code>import 'jquery/jquery.js';
</code></pre>

Put all your code that depends on jquery inside this method

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

or declare variable $ after import

<pre><code>var $ = window.$
</code></pre>

blocks|key|124118|text|webpack用户，请将以下内容添加到您的plugins数组中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|124119|let+plugins+=+[
++//+expose+$+and+jQuery+to+global+scope.
++new+webpack.ProvidePlugin({
++++$:+'jquery',
++++jQuery:+'jquery'
++})
];|code-block|syntax|javascript|124120|entityMap^0|L|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

webpack users, add the below to your <code>plugins</code> array.

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

blocks|key|121258|text|import+{jQuery+as+$}+from+'jquery';|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|121259|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>import {jQuery as $} from 'jquery';
</code></pre>

blocks|key|124131|text|如果它对任何人有帮助，javascript+import语句就会被提升。因此，如果库对全局命名空间(窗口)中的jquery有依赖关系(例如bootstrap)，这将不起作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124132|import+{$,jQuery}+from+'jquery';
window.$+=+$;
window.jQuery+=+jQuery;
import+'bootstrap/dist/js/bootstrap.min';|code-block|syntax|javascript|124133|这是因为在将jQuery附加到window之前，会提升并评估引导数据库的导入。|124134|解决这个问题的一种方法是不直接导入jQuery，而是导入一个模块，该模块本身导入jQuery并将其附加到窗口。|124135|import+jQuery+from+'./util/leaked-jquery';
import+'bootstrap/dist/js/bootstrap.min';|124136|leaked-jquery看起来像什么|offset|length|style|CODE|124137|import+{$,jQuery}+from+'jquery';
window.$+=+$;
window.jQuery+=+jQuery;
export+default+$;
export+{+jQuery+};|124138|例如，https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js|124139|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js^0|0|0|0|0|0|0|D|0|0|3|3P|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|19|8|@$O|1A|P|1B|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1D|8|@]|9|@$O|1E|P|1F|1|1G]]|A|$]]|$1|W|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

If it helps anyone, javascript import statements are hoisted. Thus, if a library has a dependency (eg bootstrap) on jquery in the global namespace (window), this will NOT work:
<pre><code>import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
import 'bootstrap/dist/js/bootstrap.min';
</code></pre>
This is because the import of bootstrap is hoisted and evaluated before jQuery is attached to window.
One way to get around this is to not import jQuery directly, but instead import a module which itself imports jQuery AND attaches it to the window.
<pre><code>import jQuery from './util/leaked-jquery';
import 'bootstrap/dist/js/bootstrap.min';
</code></pre>
where <code>leaked-jquery</code> looks like
<pre><code>import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
export default $;
export { jQuery };
</code></pre>
EG, <a href="https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js" rel="nofollow noreferrer">https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js</a>

blocks|key|124082|text|您可以创建一个模块转换器，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124083|//+jquery.module.js
import+'https://code.jquery.com/jquery-3.6.0.min.js'
export+default+window.jQuery.noConflict(true)|code-block|syntax|javascript|124084|这将删除jQuery引入的全局变量，并将jQuery对象导出为默认对象。|124085|然后在你的脚本中使用它：|124086|//+script.js
import+$+from+"./jquery.module.js";
++++
$(function(){
++$('body').text('youpi!');
});|124087|不要忘记将其作为模块加载到您的文档中：|124088|<script+type='module'+src='./script.js'></script>|124089|http://plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=preview|offset|length|124090|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|0|1F|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|13|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|18|8|@]|9|@$S|19|T|1A|1|1B]]|A|$]]|$1|U|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|R]]]]

You can create a module converter like below:
<pre class="lang-js prettyprint-override"><code>// jquery.module.js
import 'https://code.jquery.com/jquery-3.6.0.min.js'
export default window.jQuery.noConflict(true)
</code></pre>
This will remove global variables introduced by jQuery and export jQuery object as default.
Then use it in your script:
<pre class="lang-js prettyprint-override"><code>// script.js
import $ from &quot;./jquery.module.js&quot;;
 
$(function(){
 $('body').text('youpi!');
});
</code></pre>
Do not forget to load it as a module in your document:
<pre class="lang-html prettyprint-override"><code>&lt;script type='module' src='./script.js'&gt;&lt;/script&gt;
</code></pre>
<a href="http://plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=preview" rel="noreferrer">http://plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=preview</a>

blocks|key|2889509|text|我想使用alread-buildy+jQuery+(来自jquery.org)，但这里提到的所有解决方案都不起作用，我是如何修复这个问题的，我添加了以下几行代码，这应该会使它在几乎所有环境下都能工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2889510|+export+default++(+typeof+module+===+'object'+&&+module.exports+&&+typeof+module.exports.noConflict+===+'function'+)
++++?+module.exports.noConflict(true)
++++:+(+typeof+window+!==+'undefined'+?+window+:+this+).jQuery.noConflict(true)|code-block|syntax|javascript|2889511|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I wanted to use the alread-buildy jQuery (from jquery.org) and all the solutions mentioned here didn't work, how I fixed this issue was adding the following lines which should make it work on nearly every environment:

<pre><code> export default ( typeof module === 'object' &amp;&amp; module.exports &amp;&amp; typeof module.exports.noConflict === 'function' )
 ? module.exports.noConflict(true)
 : ( typeof window !== 'undefined' ? window : this ).jQuery.noConflict(true)
</code></pre>

blocks|key|2889520|text|您可以像这样导入|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2889521|import("jquery").then((jQuery)+=>+{
++window.$+=+jQuery;
++window.jQuery+=+jQuery;
++import("bootstrap").then((_bs)=>{
++++$(function()+{});
++})
});|code-block|syntax|javascript|2889522|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can import like this

<pre><code>import("jquery").then((jQuery) =&gt; {
 window.$ = jQuery;
 window.jQuery = jQuery;
 import("bootstrap").then((_bs)=&gt;{
 $(function() {});
 })
});
</code></pre>

blocks|key|121333|text|我的项目栈是：ParcelJS+%2B+WordPress|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|121334|WordPress获得了jQuery+v1.12.4本身，我还导入了jQuery+v3%5E作为其他相关模块的模块，以及bootstrap/js/dist/collapse，例如...不幸的是，由于其他WordPress模块化依赖，我不能只留下一个jQuery版本。当然，在两个jquery版本之间也会出现冲突。还请记住，我们为这个项目提供了两种运行Wordpress(Apache)+/+ParcelJS+(NodeJS)的模式，这使得一切都变得有点困难。因此，在寻找这种冲突的解决方案时，项目有时会在左侧中断，有时会在右侧中断。所以..。我的最终解决方案(我希望如此…)是：|CODE|121335|++++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..........+*/|code-block|syntax|javascript|121336|我仍然不明白我自己是如何工作的，但是这个方法是有效的。不再出现两个jQuery版本的错误和冲突|121337|entityMap^0|7|K|0|C|E|Y|A|1M|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|11|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|12|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|Q|$]]

My project stack is: ParcelJS + WordPress

WordPress got jQuery v1.12.4 itself and I have also import jQuery v3^ as module for other depending modules as well as <code>bootstrap/js/dist/collapse</code>, for example... Unfortunately, I can’t leave only one jQuery version due to other WordPress modular dependencies.
And ofcourse there is conflict arises between two jquery version. Also keep in mind we got two modes for this project running Wordpress(Apache) / ParcelJS (NodeJS), witch make everything little bit difficulty. So at solution for this conflict was searching, sometimes the project broke on the left, sometimes on the right side.
SO... My finall solution (I hope it so...) is:

<pre class="lang-js prettyprint-override"><code> 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.......... */
</code></pre>

I still didn’t understand how myself, but this method works. Errors and conflicts of two jQuery version no longer arise

blocks|key|2889549|text|如果您使用的是Webpack+4，那么答案就是使用ProvidePlugin。他们的documentation+specifically+covers+angular.js+with+jquery使用案例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2889550|new+webpack.ProvidePlugin({
++'window.jQuery':+'jquery'
});|code-block|syntax|javascript|2889551|问题是，在使用import语法时，angular.js和jquery总是在您有机会将jquery分配给window.jQuery之前导入(import语句总是首先运行，无论它们在代码中的什么位置！)。这意味着在您使用ProvidePlugin之前，angular将始终将window.jQuery视为未定义。|2889552|entityMap|0|LINK|mutability|MUTABLE|url|https://webpack.js.org/plugins/provide-plugin/#usage-jquery-with-angular-1^0|P|D|16|1K|0|0|0|7|6|1X|6|30|D|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

If you are using Webpack 4, the answer is to use the <code>ProvidePlugin</code>. Their <a href="https://webpack.js.org/plugins/provide-plugin/#usage-jquery-with-angular-1" rel="nofollow noreferrer">documentation specifically covers angular.js with jquery</a> use case:

<pre><code>new webpack.ProvidePlugin({
 'window.jQuery': 'jquery'
});
</code></pre>

The issue is that when using <code>import</code> syntax angular.js and jquery will always be imported before you have a chance to assign jquery to window.jQuery (<code>import</code> statements will always run first no matter where they are in the code!). This means that angular will always see window.jQuery as undefined until you use <code>ProvidePlugin</code>.

blocks|key|124204|text|我还没有看到这个确切的语法帖子，它在ES6/Webpack环境中对我有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124205|import+$+from+"jquery";|code-block|syntax|javascript|124206|直接取自jQuery's+NPM+page。希望这对某些人有帮助。|offset|length|124207|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/jquery^0|0|0|4|H|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I did not see this exact syntax posted yet, and it worked for me in an ES6/Webpack environment:

<pre class="lang-js prettyprint-override"><code>import $ from "jquery";
</code></pre>

Taken directly from <a href="https://www.npmjs.com/package/jquery" rel="noreferrer">jQuery's NPM page</a>. Hope this helps someone.

blocks|key|124126|text|如果您没有使用任何JS构建工具/NPM，那么您可以直接将Jquery包含为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124127|import++'https://code.jquery.com/jquery-1.12.4.min.js';
const+$+=+window.$;|code-block|syntax|javascript|124128|如果您已经在head下面包含了使用脚本标记的jquery，那么您可以跳过导入(第1行)。|124129|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you are not using any JS build tools/NPM, then you can directly include Jquery as: 

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

You may skip import(Line 1) if you already included jquery using script tag under head.

blocks|key|122244|text|Pika是一个CDN，负责提供流行包的模块版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|122245|<script+type='module'>
++++import+*+as+$+from+'https://cdn.skypack.dev/jquery';

++++//+use+it!
++++$('#myDev').on('click',+alert);
</script>|code-block|syntax|javascript|122246|Skypack是Pika，所以你也可以使用：import+*+as+$+from+'https://cdn.pika.dev/jquery@%5E3.5.1';|offset|length|style|CODE|122247|entityMap^0|0|0|M|1K|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Pika is a CDN that takes care of providing module versions of popular packages
<pre><code>&lt;script type='module'&gt;
 import * as $ from 'https://cdn.skypack.dev/jquery';

 // use it!
 $('#myDev').on('click', alert);
&lt;/script&gt;
</code></pre>
Skypack is Pika, so you could also use: <code>import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';</code>

blocks|key|2677911|text|import+$+from+'jquery'

//+export+for+others+scripts+to+use
window.$+=+window.jQuery+=+$|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2677912|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>import $ from 'jquery'

// export for others scripts to use
window.$ = window.jQuery = $
</code></pre>

I'm writing a new app using (JavaScript) <code>ES6</code> syntax through <code>babel</code> transpiler and the <code>preset-es2015</code> plugins, as well as <code>semantic-ui</code> for the style. 

<h3>index.js</h3>

<pre><code>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'));
</code></pre>

<h3>index.html</h3>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="fr"&gt;
&lt;head&gt;
&lt;body&gt;
&lt;script src="dist/app.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h3>Project structure</h3>

<pre><code>.
├── app/
│ ├── index.js
├── assets/
├── dist/
│ ├── scripts/
│ │ ├── jquery.min.js
├── index.html
├── node_modules/
│ ├── jquery/
│ │ ├── dist/
│ │ │ ├── jquery.min.js
├── package.json
└── tests/
</code></pre>

<h3>package.json</h3>

<pre><code> …
 "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}]
 ]
 }
</code></pre>

<h3>Question</h3>

Using classic <code>&lt;script&gt;</code> tag to import <code>jquery</code> works fine, but I'm trying to use the ES6 syntax.

<ul>
<li>How do I import <code>jquery</code> to satisfy <code>semantic-ui</code> using ES6 import syntax?</li>
<li>Should I import from the <code>node_modules/</code> directory or my <code>dist/</code> (where I copy everything)?</li>
</ul>

How to import jquery using ES6 syntax?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用(JavaScript) ES6语法通过babel转译器和preset-es2015插件以及semantic-ui编写一个新的应用程序。index.jsimport * as stylesheet from '../assets/styles/app.scss';import * as jquery2 fro...

问如何使用ES6语法导入jquery？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用ES6语法导入jquery？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用ES6语法导入jquery？
EN