现在搭建项目往往使用脚手架之类的工具，本篇从零开始搭建一个项目，记录一个项目开始时需要做的准备工作以及其作用。
第一步：创建package.json文件
项目中的包管理依靠npm，而npm需要用package.json去描述当前管理的情况。 同时，此文件也指定了一些入口信息如入口文件 index.js
// 进入某文件夹下
cd xxx
// 创建 package.json 文件
npm init -y
补充：package.json字段含义
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"axios": "^0.21.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
1.name和version是必须的字段，其他都是可选字段，这里主要讲一下scripts和dependencies中的^。
在scripts字段中是配置执行脚本的，比如配置 'start':'node index.js'， 那么在命令行主执行npm run start 则会直接执行node index.js。对于start、 test、 stop、 restart 这几个命令 可以直接使用npm + 名称执行，可省略中间的run。
2.版本号中的特殊符号
经常可以看到版本号中有^、~出现，这是semver规范的写法。
semver规范：
版本号由三部分组成X.Y.Z（主版本号.次版本号.修订版本号）
主版本号X: 不兼容的API
次版本号Y: 向下兼容的功能性新增
修订版本号Z: 向下兼容的问题修正（没有新功能 ，修复了之前版本的bug）
一般说来，主版本号的变化表示有重大升级，API不兼容，使用需注意版本，Y、Z则向下兼容。
^ 符号表示: X不变， Y、Z保持最新
~ 符号表示: XY不变， Z保持最新
这也是npm安装版本的依据。
第二步：使用npm安装库
必须先有package.json文件再执行这一步。
1.方式一
npm install XXX
安装完成后会自动生成一个node_modules文件夹，本项目库（局部库）都会安装在这里。
使用说明：
直接安装的表示开发和生产环境下都会使用。如果只在开发环境使用，则需要在后面加上 --save-dev或者-D命令。
install可以简写成i
2.方式二
直接使用npm install 安装，这样会根据package.json中的dependencies和devDependencies字段中的名称去安装库。这也就是我们平时提交文件只用提交package.json文件，而不用提交库文件的原因，本方安装的库的信息会直接反应到这个文件中，对方使用npm install命令直接就可安装。
补充1：package-lock.json
安装后会有package-lock.json文件，里面保存着具体的版本信息，当用户使用npm install的时候如有这个文件则会先和package.json中的库的版本进行比对如果满足则根据这个版本安装，否则查找满足的版本再安装。所以提交代码的时候也应当将这个文件提交，这样才能让不同人安装的库版本完全一致，从而避免因为库的问题导致出现的问题难以排查。
补充2：一些特殊的库（不同版本的执行）
有一些库比如webpack我们会通过-g的方式装到全局，但是有时候我们再全局已经安装的情况下，当前项目中也需要装一个不同版本的，那么在直接使用的时候会发现还是使用的全局的版本（通过webpack --vsersion查看当前版本发现是全局的），如果想使用当前项目中的版本，有以下几种做法：
1> 指定安装路径运行
./node_modules/.bin/webpack --version webpack 安装后会在.bin文件夹下，并不是node_modules文件夹下，所以说前文所说-g方式安装普通库，项目中引用不到也是这个道理。
2> 通过配置package.json中script字段
添加"mywebpack":"webpack --version"，通过npm run mywebpack执行，也是使用的当前项目版本。因为script中的执行是优先去当前项目中查找的
3> 通过npx执行
npx webpack --version npx是npm的一个新的命令，就是用于优先执行当前项目中类似于这样的情况的库的
第三步：创建自己的目录结构
到这一步，可以说一个项目就搭建完成了，剩下的就是按照一定的规范吧相关的文件、模块等进行分类以便方便管理。通常CLI自动生动的东西就是这些。
补充：通常项目中使用webpack 进行打包，可以通过配置webpack中的配置文件去配置生成的文件、访问的目录等信息。
网友评论