npm、cnpm、yarn、package.json 深藏阁楼爱情的钟 2022-12-08 01:38 278阅读 0赞 ## 1、package.json 是什么？ ## `package.json`是项目/包的描述文件。包括项目名称、版本、依赖的包、以及运行开发项目用到一些脚本执行命令等等信息。 ##### 1.1 `script` ##### > `script`是一个对象，存储了一些脚本执行命令，比如 start 、 build 之类的 执行这些命令。 > 当运行`npm run start`、 `npm run build`就会执行对应的脚本文件。 ##### 1.2 `dependencies`和`DevDependencies` ##### > 这两个部分分别用于存放开发（线上）环境和开发环境下项目所依赖的包/插件。 > 比如，我们使用到了`Element-UI`，发布到线上还是需要，就要放到`dependencies`中 > 比如，使用`babel`将`es6`转成`es5`， 上线的时候只需要把转换后的代码部署到线上环境，因此不需要`babel`、`eslint`也是同样的。 * `--save`，写入`dependencies` * `--save-dev`，写入`devDependencies中` ## 2、npm run dev/npm run start 之后发生了什么？ 做了什么？ ## 通常使用这个命令来启动本地项目。 `npm run dev`是执行了`package.json`中指定的脚本文件。在用`vue-cli`创建的项目一般 是 `webpack.dev.conf.js`。 * 引入了一些包、插件之类 * 引入了`webpack.base.conf.js`，和本身的配置信息进行了合并 * `webpack.base.conf.js`中指定了入口文件，`main.js` * `main.js`中引用了`App.vue`。 * `App.vue`就是这个vue项目的最顶层了 ## 3、npm run build 之后发生了什么 ## 通常这个命令用来打包项目，打包完成后会看到在dist目录下有了index.html 和一些js css文件等等。这些文件是经过打包处理的，可以直接访问index.html 查看效果 `npm run build`执行了`package.json`中指定的脚本文件，在用`vue-cli`创建的项目中，一般是 `build.js` * 引入了一些包 * 引入了 `webpack.prod.conf.js` * 开始打包 * webpack 打包的过程 … ## 4、npm 、cnpm 、yarn 什么关系有啥区别 ## 这三个都是包管理工具，用于项目所要依赖的包的安装卸载删除等等。 ###### 4.1 `npm` ###### > 是默认的包管理工具 ###### 4.2 `cnpm` ###### > `cnpm`，可以认为是中国版的`npm`，因为`npm`安装包是从境外的服务器下载，受网络影响很大，可能出现异常情况。淘宝团队做了这件事，在国内实现了一个npm的完整镜像，同步频率为10分钟一次。使用cnpm需要安装一下`npm install -g cnpm --registry=https://registry.npm.taobao.org` ###### 4.3 `yarn` ###### > 是由`facebook`，`Google`等联合推出的一个新的包管理工具。它弥补了`npm`的一些缺陷。 * `npm install`的时候很慢，很多时候还会因为网络原因安装不下来。 * 同一个项目，安装的时候不能保持一致性。这时由于package.json文件中版本号的写法的缘故。 > “5.0.3” 安装指定的版本5.0.3 > “~5.0.3” 安装5.0.x中最新的版本 > “^5.0.3” 安装5.x.x中最新的版本 这样可能会导致同一个项目，不同时间安装，由于包的版本不一致出现bug。 ###### 4.4 `yarn`的优势 ###### 1. 速度快，并行安装、离线模式：如果之前已经安装过一个包，再次安装的时候会从`缓存`中获取。 2. 安装版本同一，为了防止拉取到不同版本的，yarn会有一个锁定文件`yarn.lock`，里面确切记录了每个包的版本号 3. 命令行里的输出更加简洁 ## 5、使用vue-cli构建的工程/项目都用到了哪些技术 ## 1. vue.js ，数据双向绑定和组件系统 2. vue-router ， 路由 3. vuex ，状态管理器，主要用于vue组件间的通信啊，状态的同步、传递啊 4. axios（或者fetch），用于发起HTTP请求，基于promise的 5. webpack，模块加载打包工具 ## 6、vue-cli工程中每个文件的的用处 ## 1. build文件夹---->存放webpack相关的配置文件。比如`webpack.base.conf.js`、`webpack.dev.conf.js`、`webpack.prod.conf.js`等等 2. config文件夹---->存放配置文件，用于区分开发环境、测试环境、线上环境等。有`dev.env.js`，`prod.env.js`，`test.env.js`以及`index.js`。通常会在index.js中配置开发环境的端口号/域名/是否开浏览器等。 3. dist文件夹---->默认的`npm run build`命令后生成的静态资源文件，用于生产部署 4. node\_modules，存放依赖的包 5. src，项目源码 6. package.json，项目的描述文件 7. 其他 ## 7、npm/cnpm/yarn 常用的一些命令 ## ###### 7.1 安装包 ###### * `npm install vuex` * `cnpm install vuex` * `yarn add vuex` ###### 7.2 包的删除/卸载 ###### * `npm uninstall vuex` * `cnpm uninstall vuex` * `yarn remove vuex` ###### 7.3 安装指定版本的包 ###### * `npm install vuex@3.2.1` * `cnpm install vuex@2.1.9` * `yarn add vuex@1.2.12` ### 8、npm install 安装包的过程 ### 以执行 `npm install vuex`为例，它是怎么实现将指定到包安装下来的，它的过程大致是什么样的？ **8.1 从npm install 说起** `npm install`命令常用来安装包到`node_modules`目录。 在安装之前，会先检查目录`node_modules`中是否已经存在指定模块/包。如果存在就不再重新安装了。 如果希望，一个模块/包不管是否已经安装，npm 都要强制重新安装， 可以使用```--force `` ```npm install vuex --force\`\`\` **8.2 缓存目录** `npm install`下载到指定包后，都会存放在本地的缓存目录。 Mac中通过以下命令可以查看 这个缓存目录的具体位置： npm config get cache ![在这里插入图片描述][20201018230921559.png_pic_center] 这个缓存目录存放着大量的模块，每个模块的每个版本，都有一个自己的子目录，里面的代码是对应的压缩包`package.tgz`文件。 **8.3 模块的安装过程** * 命令行输入`npm install 包`，执行 * npm 查询模块压缩包的地址 * 下载压缩包，存在本地缓存目录下 * 解压到当前项目的node\_modules目录 **注意**，一个模块安装以后，本地其实保存了两份。一份是本地的缓存目录，一份是在项目的`node_modules`目录中。 但是， 执行`npm install`命令的时候，只会检查`node_modules`目录，而不会检查本地缓存目录。 也就是说，如果一个包在本地缓存目录下有压缩包，但是没有安装在`node_modules`目录中，仍然会从远程仓库重新下载一次。 这种行为的优点：保证总是取得最新的代码 缺点：极大的影响安装包的速度。 **8.4 --chache-min 参数** `--cache-min`参数，可以让npm 从本地缓存目录安装模块。 [20201018230921559.png_pic_center]: /images/20221123/1ee929c65f7c4124826c3d2f41604690.png
还没有评论，来说两句吧...