如何直接在js中引用npm安装的包，比如 jquery 或者vue什么的

Question

由于我写的django项目不是前后端分离的，看了ES6的语法与设计模式，想重写里项目里的js代码，打算用npm管理包而不是用script标签应用，比如 npm install jquery 但在js中写 import $ from ‘jquery’ 时会报错的。

不知道是否一定要用webpack打包后才能这样使用npm中安装的包，前端模块化这部分知识比较乱，老师能否解释一下，谢谢

Answer 1

双越 2019-06-24 11:35:58

PS：其实，你这种情况下我更加建议你用 cdn ，静态资源有缓存，效率会更高。

Answer 2

双越 2019-06-24 08:45:41

可以的。npm 安装了 jQuery 之后，会有一个 node_modules 目录，下面有 jquery 文件夹，其中有 package.json 文件。打开，里面有 "main" 属性，其值就是 jquery 的主文件。引用这个即可。

• 提问者 李嘉图principal #1

  按照老师的说法这样引用了： 
  import $ from 'jquery/dist/jquery'
  $(document).ready(function(){
      $("#test").click(function(){
          $(this).hide();
      });
  });
  但是报错： SyntaxError: import declarations may only appear at top level of a module  是什么意思不太明白

• 双越 回复 提问者 李嘉图principal #2

  应该是 'node_modules/jquery/dist/jquery.js' 吧？第一，得写明是 node_modules 目录，因为你没有 webpack ；第二，得写明 .js 后缀，还是因为你没有 webpack

• 提问者 李嘉图principal 回复 双越 #3

  还是不行-.-    我先用webpack 打包js 然后用script标签引入到HTML中应该可以用吧

点开查看后面1条评论