Derrick.Jiao 发表于 2020-12-17 16:38:03

教你不用框架也能用npm的资源

本帖最后由 Derrick.Jiao 于 2022-7-19 18:13 编辑

很多小伙伴在做一些简单的js demo的时候或者利用纯js写代码的时候想要引用一些静态资源,这时候需要一个个找相应的资源会比较麻烦。
拿SpreadJS举例,要想比较全面地使用SpreadJS的功能大约要引用7个js文件,一个css文件。那么有没有可以像框架那样,写个package.json然后npm install就能把咱们的依赖下到本地的方法呢?

答案是有的,本篇文章将会教你快速地引用资源,以及更改版本号就能体验不同版本。

首先,我们先简单介绍一下npm
NPM是包管理工具,常见的使用场景有以下几种:1、允许用户从NPM服务器下载别人编写的第三方包到本地使用。2、允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。3、允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
通常,我们执行npm install后,根目录下会多一个node_modules文件夹。node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。在这个文件中,就有我们想要的静态资资源,我们只需找到对应的路径,填写到script的src中即可。像下图一样。
那么想要执行npm install还需要一件东西:package.json,就像在框架中那样,我们在package.json中配制对应的依赖,node环境会自动从npm中下载我们需要的资源。这样,发送这样一个demo给别人的时候只需把node_modules删除。别人拿到你的demo,直接npm install就可以运行。

另外对比需要引用静态静态资源的demo,体积小了很多很多。(当然,npm install之后体积是会比用静态资源大6M左右)。

那么,知道了上述的方法,切换版本是不是小菜一碟了呢?只需删除原来的node_modules,修改package.json依赖的版本重新npm install即可。



附件是一个简单的demo,下载下来然后npm install下载依赖即可,就像框架那样。

注:V11.1.0以上版本才可以通过这种方式下载

SpreadJS npm地址
https://www.npmjs.com/package/@grapecity/spread-sheets
页: [1]
查看完整版本: 教你不用框架也能用npm的资源