1. ホーム
  2. jquery-ui

jquery-uiとwebpack、モジュールで管理する方法とは?

2023-08-10 06:08:26

質問

それに対処するための任意のアイデア?私はjquery-uiがamdでないようで、私はそれを管理する方法を知らないことを意味します、任意のアイデア?

どのように解決するのですか?

運がいいことに、私は昨日これをやりました。

npm install --save jquery jquery-ui

webpack.config.jsにプラグインで解決するためのjqueryのaliaseがあることを確認する。

...
plugins: [
    new webpack.ProvidePlugin({
      "$":"jquery",
      "jQuery":"jquery",
      "window.jQuery":"jquery"
    }),
...

次に、webpack.config.jsに2つのエイリアスを含めます。

  1. node_modules フォルダに
  2. jquery-ui フォルダ

resolve : {
    alias: {
      // bind version of jquery-ui
      "jquery-ui": "jquery-ui/jquery-ui.js",      
      // bind to modules;
      modules: path.join(__dirname, "node_modules"),

アプリ起動ファイルで、jqueryが最初にロードされるようにします。

var $ = require("jquery"),
        require("jquery-ui");

テーマを使用する場合は、css-loaderとfile-loaderを設定します。これらのローダーをnpmでインストールすることを忘れないでください。

module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      { test: /\.(jpe?g|png|gif)$/i, loader:"file" },

そして、アプリの起動ファイルで使用します。

require("modules/jquery-ui/themes/black-tie/jquery-ui.css");
require("modules/jquery-ui/themes/black-tie/jquery-ui.theme.css");