node.js npm 操作模块化开发 cnpm镜像安装

Bertha 。 2021-12-07 09:45 244阅读 0赞

模块（包）

传统引入 js 的缺点

整个网页，我们写了一个 js 文件，所有的特效都在里面

耦合度太高，代码之间关联性太强，不便于后期维护

变量容易 全局污染

如果将 复杂的 js 文件，拆成多个功能的 js 文件

缺点：

发生的请求过多，依赖模糊，难于维护

这是传统的开发模式，都被抛弃掉了

所以我们使用 模块化的开发模式

为什么使用模块化

减少代码之间的关联度

部署方便

更好的进行分离，按需加载，避免了命名冲突，容易维护

什么是模块化

node 自带的规范（模块） commonjs 规范

node -v　检测 mode 版本

node 是 JavaScript 的环境，在 node 里面可以运行 js 文件，干服务器　　指令： node 文件名

commonjs 模块，是 node 的规范运行，在服务端，不是浏览器端，如果使用在浏览器端，需要使用对该文件进行打包编译（借鉴工具 browserify　　webpack　　gulp 等）

暴露的本质是对象

每个 js 文件，都必须对外暴露接口

书写模块的时候，对外暴露接口，modele.exports=\{\}　或　exports.xxx=

引入模块 require()　　参数：路径　　路径注意 ：如果是当前文件，前面必须加 ./  。如果只写了文件名，则是在node\_modules文件下

commonjs 暴露的本质是一个角 exports 的对象

module.exports=\{\} 和 exports.xxx= 的区别？

二者暴露本质是一样的，都是暴露一个 exports 对象　　前者会将原有的 exports 的内存地址覆盖，后者会在原有的 exports 的基础上进行添加

commonjs 是同步加载，是 node 的规范，同步加载在浏览器是一个大坑，只要一个环节卡住了，后面的就没法执行，所以不建议使用，如果非要使用，要需要编辑打包

对于 web 端，每个 js 都是一模块，每个模块都必须暴露一个接口，每个 js 文件，有一个全局 require() 方法，用来引入模块

模块：

1.node 自带的包（模块）， path　　url　　fs

2.第三方模块 weui / jquery / axios / zepto

3.自定义模块：我们写的

配置模块说明文件，npm iinit 就会生成一个包 package.json 的文件

version：版本号

desciption：说明

main：index.js 文件　　我们主文件 index.js 文件，剩下的都是子模块

在浏览器说 require ：is not defined

说明浏览器不支持 commonjs，需要借鉴打包工具

1.browserify

npm（全称为：node package manager）翻译过来为 node 模块包管理工具

node 自带的集成环境

对 npm 包管理工具的增删查改

下载：

npm install -g jquery --save(生产环境)    -g(代表全局下载，否则代表当前目录)

删除：

npm uninstall jquery

查找：

npm search jquery

修改：

npm update jquery

对于我们开发者来说，只需要一个下载就可以了，删除的话，我们可以直接删除文件

www.npmjs.com　　包管理工具的官方网站

下载的存放位置

全局下载，在任何一个文件下都能使用这个包，（在计算机的任何位置使用）

局部下载，智能在当前目录下使用

但是 npm 是国外的网站，所以下载会很慢，我们可以安装淘宝 npm 镜像  （称为：cnpm ）

配置：npm install -g cnpm --registry=https://registry.npm.taobao.org

案例：

全局安装：jQuery（不推荐，可能不生效）

国内　　cnpm install -g jquery --save

国外　　npm install -g jquery --save

终止程序：ctrl+c

局部安装：npm install jquery --save　　就会在目录生成一个 node\_modules 的文件夹

文件下：var $=require("jquery")

当前文件要加./ 　， 没有 ./ 的话，默认在 node\_modules 里面找

index.js 是这个包的输出文件，即便删除了package.json 只要不改变 index.js 的文件名就没事，一旦改了就报错，是因为包的输出文件是 index.js

npm install jquery --save （这个是下载运行环境（生产环境）的包） 比如 jQuery swiper

npm install browserify --save-dev （这个是下载开发环境的包） 比如 npm browserify 上线不依赖他们

二者的区别？

前者 --save 是上线时，会被压缩的包，后者时 --save-dev 上线时被抛弃的包

dependecies：生产环境，依赖的包

devdependencies：开发环境，依赖的包

指定版本上线：

npm install jquery @3.2.1 --save (必填，生产环境)

删除：npm uninstall jquery （基本上不用，直接删除文件也能达到这样的效果）

在浏览器 不支持 require() 方法，需要 browserify 工具

1. npm install -g browserify

2.编译打包：

browserify 主文件>编译文件　　（名字就可以）　　> 两侧不能出现空格，否则就会中文就会出现乱码

如果我们拥有了 package.json 文件，但是他里面的文件丢失？

我们可以用     npm i    指令在 npm 上下载回来　　只下载 node\_modules 的内容

npm 下载的操作 细节处理（重要 ！），package.json 这样的配置应该属于局部（猜测。。。）

如 jQuery / swiper 这样的代码，缺少他们 网页便运行不了，所以需要生产环境，且需要在局部配置操作，

像 npm / browserify 这样的代码，上线后便不需要了，所以这个是在开发环境， 所以在全局配置上会好一点，

转载于:https://www.cnblogs.com/shangjun6/p/10967822.html

node.js npm 操作模块化开发 cnpm镜像安装

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 npm 转为国内cnpm镜像

相关 npm更换镜像源 cnpm

相关 cnpm —— 淘宝 npm 镜像

相关 nodejs基本操作，npm与cnpm使用介绍

相关 node npm cnpm 全局安装淘宝NPM 镜像

相关 Nodejs npm cnpm 自定义安装配置

相关 NodeJS安装NPM安装CNPM淘宝镜像

相关 nodeJs，npm，cnpm，Vue安装及 IDEA 开发Vue项目设置

相关 NodeJS安装cnpm

相关 node.js npm 操作模块化开发 cnpm镜像安装