セマンティック UI 互換性のために jQuery を ES6 構文にインポートする 質問: アプリの構築ES6 構文を Babel トランスパイラーとセマンティック UI でスタイリングに利用するには、jQuery をインポートする必要があります。ただし、 を使用すると、タグのアプローチは ES6 インポート構文と一致しません。これにより、次の 2 つの疑問が生じます:</p> <ol> <li>semantic-ui の使用法を補完するために、ES6 構文を使用して jQuery をインポートするにはどうすればよいですか?</li> <li>インポートは、node_modules/ または dist/ ディレクトリから開始する必要があります (ここで、アプリはコンパイルされています)?</li> </ol> <p><strong>答え:</strong></p> <h3>コードの変更</h3> <p>ES6 構文を使用して jQuery を効果的にインポートするには、index.js ファイルを変更します。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>import { $, jQuery } from 'jquery'; // Export for other scripts to access window.$ = $; window.jQuery = jQuery;</pre><div class="contentsignin">ログイン後にコピー</div></div> <h3>インポート元</h3> <p>インポート元については、node_modules/ ディレクトリから jQuery をインポートすることを推奨します。このアプローチは、通常、コンパイル中にアセットが node_modules/ から dist/ フォルダーに移動される配布プロセスと一致しています。</p> <h3>考慮事項</h3> <ol> <li> <strong>特定のインポート:</strong> 回避glob * を import ステートメントとして使用します。特定のオブジェクト ($ および jQuery) がわかっているこのシナリオでは不要であるためです。</li> <li> <strong>他のスクリプトへの公開:</strong> jQuery を他のスクリプトに公開することによってwindow.$ = $ を使用すると、プロジェクト全体でそのアクセシビリティを確保できます。</li> <li> <strong>インポートの安全性:</strong> エイリアスと名前の両方をインポートしても、browserify は重複を排除し、オーバーヘッドを排除します。</li> </ol>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
