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: Array:npm 包中的 javascript 文件列表,按原样包含,无需分析它们的依赖关系或将它们包装到模块中。

于 2018-04-05T07:14:46.490 回答