2

npm で jQuery プラグイン (js-offcanvas) をインポートしようとしていますが、同じエラーが発生し続けます。

app.js:20: Uncaught TypeError: $(...).offcanvas is not a function

app.js ファイル:

import offcanvas from "js-offcanvas"

$('#off-canvas').offcanvas({
  // options
});
$( function(){
  $(document).trigger("enhance");
});

html ファイル:

<body>
  <div class="c-offcanvas-content-wrap">
    ...
    <a href="#off-canvas" data-offcanvas-trigger="off-canvas">Menu</a>
    ...
  </div>
  <aside id="off-canvas"></aside>
</body>

私が何か間違ったことをしているかどうかはわかりません。

更新 ここに私のbrunch-config.jsファイルがあります：

exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
  javascripts: {
    joinTo: "js/app.js"

    // To use a separate vendor.js bundle, specify two files path
    // https://github.com/brunch/brunch/blob/master/docs/config.md#files
    // joinTo: {
    //  "js/app.js": /^(js)/,
    //  "js/vendor.js": /^(vendor)|(deps)/
    // }
    //
    // To change the order of concatenation of files, explicitly mention here
  // https://github.com/brunch/brunch/tree/master/docs#concatenation
  // order: {
  //   before: [
  //     "vendor/js/jquery-2.1.1.js",
  //     "vendor/js/bootstrap.min.js"
  //   ]
  // }
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor"],
    // Where to compile files to
    public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },
npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
    }
  }
};
4

1 に答える 1

0

次のように npm.static を試してください。

npm: {
  static: ['node_modules/${plugin-name}/${js-path}']
}

これにより、選択したファイルが結合ファイルに含まれます。詳細については、ドキュメントを参照してください。

npm.static: 配列: 依存関係を分析したり、モジュールにラップしたりせずに、そのまま含まれる npm パッケージの JavaScript ファイルのリスト。

于 2018-04-05T07:14:46.490 に答える