如何使用npm将jquery添加到phoenix 1.3

Question

There are good official phoenix docs explaining how to add an npm dependency (even uses jquery). Evidently, I am missing something here. Here is what I have:

Using elixir 1.6 , phoenix 1.3 , and node 8.9 on Mac OSX.

assets/js/app.js contains:

import $ from 'jquery';

assets/brunch-config.js contains:

 npm: {
    enabled: true,
    npm: {
      globals: {
        $: 'jquery',
        jQuery: 'jquery'
      }
    }
  }

package.json contains:

 "dependencies": {
    "jquery": "^3.3.1",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  }

My "application logic" - in a js file imported from assets/js/app.js :

$(function () {
  alert('Hello');
});

Do have a workaround by simply (manually) copying jquery.min.js from assets/node_modules/query/dist into assets/vendor . But am keen to understand what is going wrong with the automatic inclusion using npm and brunch asset pipeline.

Answer 1

You don't need import $ from 'jquery'; in app.js

In assets/brunch-config.js do this instead:

npm: {
  enabled: true,
  globals: {
    $: 'jquery',
    jQuery: 'jquery'
  }
}

(you have extra npm section inside top npm section)

I've answered similar question before, still actual: https://stackoverflow.com/a/43265955/1173020