前言这是从零开始创建前端项目系列文章的开篇。构建现代前端项目时：（1）git托管代码（2）webpack前端代码打包工具（3）react/vueFramework等前端（4）ESLint前端代码风格验证工具（5）TypeScript前端代码结构及类型静态编译验证工具本文主要介绍以下相关概念：(1)结合git(2)为项目创建必要的包。json文件（三）npm包相关知识二话1.使用git如果安装了git，将文件夹=初始化为一个git文件夹：gitinit文件夹中会自动生成.git文件夹，里面存放git跟踪文件。这样就可以对项目代码进行git相关的操作，比如推送到远程仓库。2、package.json文件参考链接：阮一峰通常在每个项目的根目录下都有一个package.json文件，里面定义了项目需要的各个模块，以及项目的配置信息（如名称、版本、元数据等）如许可证）。npminstall命令会根据这个配置文件自动下载需要的模块，即配置项目所需的运行和开发环境。这里主要介绍常用的初始化工程。初始化项目：npminit然后会要求填写一些信息：init提示信息：知识点：包名->nameversion->versindescription->descriptionentrypoint->maintestcommand->scriptsgitrepository->repositoryke??ywords->keywordsauthor->authorlicense->license2-1namename为项目名2-2versionversion为版本（遵循“大版本.小版本.小版本”的格式），后面会详细介绍。{"name":"xxx","version":"0.0.0",}2-3description对本项目的描述2-4keywordskeywords2-5repository仓库，例如git:"repository":{"type":"git","url":"git@github.com:git/webpack_test.git"}2-6authorprojectowner2-7license开源协议2-8scriptsscripts指定npm命令运行脚本命令行缩写，例如start指定运行npmrunstart时要执行的命令。以下设置指定npm(run)start、npm(run)test时要执行的命令。"scripts":{"start":"npmrundev.js","test":"nodetest.js"}2-9dependencies,devDependencies1)Execute:npminstallmodule--save将模块名称和版本依赖项下的编号；2）执行：npminstallmodule--save-dev将模块名称和版本号放在devDependencies下。dependencies字段指定项目依赖的模块，devDependencies指定项目开发所需的模块。他们都指向一个对象。对象的每个成员由模块名称和对应的版本要求组成，表示所依赖的模块及其版本范围。{"devDependencies":{"browserify":"~13.0.0","karma-browserify":"~5.0.1"}}//版本号规范后会有说明同package.json文件，直接使用npminstall命令会在当前目录下安装需要的模块。npminstall2-10peerDependencies有时候，你的项目和你依赖的模块同时依赖另一个模块，只是依赖的版本不同。比如你的项目依赖1.0版本的模块A和模块B，而模块A本身依赖2.0版本的模块B。在大多数情况下，这不是问题，B模块的两个版本可以共存运行同时。但是，有一种情况会出现这种依赖性会暴露给用户的问题。最典型的场景就是插件，比如模块A是模块B的插件，用户安装的B模块是1.0版本，但是A插件只能和B模块一起使用版本2.0。这时候如果用户把B的1.0版本的实例传给A，就会出现问题。所以需要一种机制在模板安装的时候提醒用户，如果A和B一起安装，那么B一定是2.0的模块。peerDependencies字段用于插件指定它需要的主要工具的版本。{"name":"chai-as-promised","peerDependencies":{"chai":"1.x"}}上面代码指定在安装chai-as-promised模块时，主程序chai必须是一起安装，并且chai的版本必须是1.x。如果你的项目指定的依赖是chai的2.0版本，会报错。请注意，从npm版本3.0开始，不再默认安装peerDependencies。2-11binbin项用于指定每个内部命令对应的可执行文件的位置。"bin":{"someTool":"./bin/someTool.js"}上述代码指定someTool命令对应的可执行文件为bin子目录下的someTool.js。Npm将查找此文件并在node_modules/.bin/目录中创建一个符号链接。在上面的示例中，someTool.js将创建一个符号链接npm_modules/.bin/someTool。由于node_modules/.bin/目录在运行时会被添加到系统的PATH变量中，所以在运行npm时可以通过命令直接调用这些脚本，不需要路径。因此，像下面这样的写法可以简写。scripts:{start:'./node_modules/someTool/someTool.jsbuild'}//简写为scripts:{start:'someToolbuild'}node_modules/.bin/目录下的所有命令都可以使用npmrun[command]格式运行。在命令行上，键入npmrun并按Tab键以显示所有可用命令。2-12mainmain字段指定加载的入口文件，require('moduleName')会加载这个文件。该字段默认值为模块根目录下的index.js。2-13configconfig字段用于为命令行添加环境变量。下面是一个package.json文件。{"name":"foo","config":{"port":"8080"},"scripts":{"start":"nodeserver.js"}}然后，可以引用server.js脚本配置字段的值。http.createServer(...).listen(process.env.npm_package_config_port)当用户执行npmrunstart命令时，这个脚本可以获取到值。$npmrunstart用户可以更改此值。$npmconfigsetfoo:port802-14browserbrowser指定浏览器使用的这个模板的版本。Browserify之类的浏览器打包工具通过它知道要打包哪个文件。"browser":{"tipso":"./node_modules/tipso/src/tipso.js"},2-15enginesengines字段指定模块运行的平台，比如某个版本的Node或者浏览器.{"engines":{"node":">=0.10.3<0.12"}}这个字段也可以指定适用的npm版本。{“引擎”：{“npm”：“?1.0.20”}}3。package-lock.json文件参考链接：https://mp.weixin.qq.com/s/Na...根据官方文档，这个package-lock.json是npminstall时生成的一个文件，用来记录具体的当前状态下实际安装的每个npm包的来源和版本号。它是做什么用的？因为npm是一个管理包之间依赖关系的管理器，它允许开发者在pacakge.json中间标记他们的项目对npm的库包的依赖。您可以选择通过以下方式标记您需要的库包的版本。下面是一个例子："dependencies":{"@types/node":"^8.0.33",}，其中向上标记^定义了向后（新）兼容性依赖，这意味着如果types/node的版本大于8.0.33，与主版本号（8）相同，允许下载最新版本的types/node库包，例如实际可以运行npminstall时下载的具体版本为8.0.35。大多数情况下，下载最新的库包是没有问题的，兼容新版本。然而，由于npm是一个开源世界，每个库包的版本语义可能不同，一些库包开发者并没有遵守严格的规则。原则一：相同主版本号的同一个库包的接口满足兼容性要求。这时候用户就头疼了：在同一个nodejs代码库中，在不同的时间或者不同的npm下载源下，下载的依赖库包的版本可能不同，因此依赖库包的行为特征也不同.不同，有时甚至完全不相容。因此，最新版本的npm开始提供自动生成package-lock.json的功能，就是为了让开发者知道，只要保存源文件，去新机器或者新下载源，跟着就好这个package-lock可以确保所有的库包都和你上次安装的完全一样。package.json文件只能锁定大版本，即版本号的第一位，不能锁定后面的小版本。每次npminstall的时候，都会在主版本下拉取最新的版本，出于稳定性的考虑，我们几乎不敢随意升级依赖包，会导致很多额外的工作量，测试/适配等，所以包-lock.json文件出来，每次安装一个依赖，都会锁定在你安装的这个版本。以前可以直接在package.json里改版本，然后npminstall，但是5版本以后就不支持了，因为package-lock.json里已经锁定了版本，只能npminstallxxx@x.x.x通过这种方式更新我们的依赖，然后package-lock.json可以相应更新。通俗地说就是：帮你锁定次要版本，让它在任何环境下都可以在本地加载你安装的当前版本。4、npm版本知识指定版本：比如1.2.2，遵循“主版本.次版本.次版本”的格式，安装时只安装指定的版本。(1)波浪号(tilde)+指定版本：比如~1.2.2表示安装最新版本的1.2.x(不低于1.2.2)，但不安装1.3.x，也就是说，安装不会更改版本号和次要版本号的大小。(2)Caret(脱字符)+指定版本：例如^1.2.2表示安装最新版本的1.x.x（不低于1.2.2），但不安装2.x.x，表示主版本安装时不会改变编号。需要注意的是，如果主版本号为0，则插入符的行为与波浪号相同。这是因为此时正处于开发阶段，即使小版本号发生变化也可能导致程序不兼容。(3)latest：安装最新版本。对于主要版本的格式还有另一种流行的解释。小版本。Minorversion：Majorversion指的是重大升级，很可能与之前的版本不兼容。次要版本是当前版本的扩展。小版本指的是修复当前版本bug三后记
