How to Import jQuery with ES6 Syntax in Babel and Semantic-UI?

Importing jQuery using ES6 Syntax

When using ES6 syntax with Babel transpiler and semantic-ui, importing jQuery can be done as follows:

index.js

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

Explanation:

• Importing from node_modules: jQuery should be imported from the node_modules/ directory, not from the dist/ directory. The build:app script in package.json is responsible for copying jQuery to the dist/ folder.
• Specific import: Instead of using the glob wildcard *, you can import specific named exports, such as $ and jQuery.
• Exposing jQuery: To make jQuery available to other scripts, it's necessary to expose it to the global scope using window.$ = $.
• Duplicate import removal: Browserify eliminates duplicate imports, so there's no overhead in importing both $ and jQuery.

The above is the detailed content of How to Import jQuery with ES6 Syntax in Babel and Semantic-UI?. For more information, please follow other related articles on the PHP Chinese website!