请教怎样使第三方模块由 npm 的方式引用？

[Corbusier]

比如我在一个 index.html 上要引用 jquery 或者是自己编写的 jq 插件,这个插件我已经上传到 npm 了,而且我也已经下载好这个 npm 到本地了,那么我要怎么做才可以直接引用他们？而不是用这样原始的方式引用：

	<script src="jquery.js"></script>

[noe132]

帖子好像发重了~

既然已经 npm install `your_module`

那就直接在代码里 let your_module = require('your_module')

然后让打包工具帮你把代码打包到一个文件 bundle.js，看你用的是 webpack 还是 browserify

然后在页面中添加 <script src="bundle.js"></script>

[ferrum]

我觉得楼主的意思，如何在 html 内引用这个插件。

使用 npm install 的依赖，会放在项目文件夹下的 /node_modules/dependency_name 下，就直接使用这个路径。

不过看楼主的描述，建议先了解下 npm，require 等 nodejs 基础。

[izayl]

bower 可能更适合你

[coolcoffee]

使用 webpack 配合 require 语法，可以通过一个入口或者多个入口，然后引入无限个模块。

[Corbusier]

@ferrum 唉，兄弟你理解对了。回头我一想确实写的很模糊。这样你都能看明白真难为你了，哈哈。这三五天我都在学习 webpack，gulp 等等一系列的工具，我感觉吧我并不懂它的原理，只是按照别人所写的步骤一步步做，然后突然就得到了结果，因为配置文件啊，指令实在是数不胜数，做的任务其实是在配置文件再运行工具，十分盲目，只是为了使用它在使用。不知道大家是怎么学习，理解这些工具的呢？

[kutata]

谢谢这个主题帖。
也谢谢一楼的解答！
解决了我一直疑问。

[kutata]

@Corbusier 一楼就是正解啊，二楼的是原始的做法。
总结就是让 webpack 这些东西帮你打包 / 引入资源( 区分前后端 )

[Corbusier]

@kutata 我的意思是在 html 文件里面可以引入这个资源，最原始的方法是
```
<script src="jquery.js"></script>
```
如果使用 npm 可以不用再这么写了,表达不太清楚,你是这么想的吗？得到结果了没？

[kutata]

webpack 等工具其中一个功能就是帮打你打包资源的啊，他可以把 node_modules 里面的前端资源包(jquery.js, mootools.js，
bootstrap.js 等等)压缩成 bundle.js 然后你直接引用那个 bundle 文件就可以了啊.. 😅

[Corbusier]

@kutata 我觉得对于模块化我还是不太了解，就像二楼所说的那样，我还要再回头看看 nodejs 的基础部分，很多东西只是凑巧配置文件看别人的弄对了，我就得到了结果，太盲目了

[kutata]

@Corbusier 是哒~