litemall源码阅读2.02管理后台前端litemall-admin之npm与package.json

npm为node.js环境下的依赖项管理工具,类似于java后台开发中的maven。实现自动下载依赖项、自动部署等功能。

而package.json是npm运行时的配置文件。

这里我个人理解的并不好,其实vuecli是包含webpack技术的。而package.json这个文件就像是webpack的配置文件。

但是,整个项目并没有包含webpack的关键字。

litemall源码阅读2.02管理后台前端litemall-admin之npm与package.json

 也就是说,cli包括了webpack服务。我个人现在对npm webpack这套技术缺少认知。

cnpm为使用大陆镜像的npm,链接速度更快。

在学习中主要参照了

https://javascript.ruanyifeng.com/nodejs/packagejson.html这篇文章。

litemall管理前端的启动顺序为:

=https://registry.npm.taobao.org
cd litemall/litemall-admin
//安装依赖项,运行后会下载依赖模块到项目根目录下的node_modules文件夹中 install
//运行package.json中scripts下的dev对象值的内容。 cnpm run dev

litemall的目录结构为vue-cli自动生成的目录结构(包括package.json文件),下面这篇文章对vue-cli生成的目录进行了较为详细的说明

https://www.cnblogs.com/goloving/p/8693189.html

litemall的package.json代码如下,增加了简单的注释,其中每行的意义我会在后续文档中详述:

  1 {
    //项目名称
2 "name": "litemall-admin",
    //版本号
3 "version": "1.0.0",
    //项目描述
4 "description": "litemall-admin basing on vue-element-admin 4.3.0",
    //作者
5 "author": "linlinjava <linlinjava@163.com>",
    //MIT授权
6 "license": "MIT",
    //npm命令行运行参数,如cnpm install dev,则会启动scripts下的dev对象值的内容
7 "scripts": {
      //vue-cli-service相关内容,后续再细读
8 "dev": "vue-cli-service serve", 9 "build": "vue-cli-service build --mode production", 10 "build:prod": "vue-cli-service build --mode production", 11 "build:dep": "vue-cli-service build --mode deployment",
      //index.js文件也会进行vue-cli-service的操作。暂时未阅读。进入后会运行run(`vue-cli-service build ${args}`)
12 "preview": "node build/index.js --preview",
      //提交git相关,在提交前进行代码检查等操作
13 "lint": "eslint --ext .js,.vue src",
      //组件单元测试
14 "test:unit": "jest --clearCache && vue-cli-service test:unit",
      //代码检查加测试?
15 "test:ci": "npm run lint && npm run test:unit",
      //压缩svg文件
16 "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml" 17 },
    //与代码检查相关的配置
18 "husky": { 19 "hooks": { 20 "pre-commit": "lint-staged" 21 } 22 }, 23 "lint-staged": { 24 "src/**/*.{js,vue}": [ 25 "eslint --fix", 26 "git add" 27 ] 28 },
    //项目关键字?https://zhuanlan.zhihu.com/p/148795036
29 "keywords": [ 30 "vue", 31 "admin", 32 "dashboard", 33 "element-ui", 34 "boilerplate", 35 "admin-template", 36 "management-system" 37 ],
    //git push配置
38 "repository": { 39 "type": "git", 40 "url": "git+https://github.com/linlinjava/litemall.git" 41 }, 42 "bugs": { 43 "url": "https://github.com/linlinjava/litemall/issues" 44 },
    //生产环境依赖项
45 "dependencies": { 46 "@tinymce/tinymce-vue": "3.0.1", 47 "lodash": "^4.17.11", 48 "v-charts": "1.19.0", 49 "axios": "0.18.1", 50 "clipboard": "2.0.4", 51 "connect": "3.6.6", 52 "echarts": "4.2.1", 53 "element-ui": "2.13.2", 54 "file-saver": "1.3.8", 55 "js-cookie": "2.2.0", 56 "normalize.css": "7.0.0", 57 "nprogress": "0.2.0", 58 "path-to-regexp": "2.4.0", 59 "screenfull": "4.2.0", 60 "script-loader": "0.7.2", 61 "vue": "2.6.10", 62 "vue-count-to": "1.0.13", 63 "vue-router": "3.0.2", 64 "vuex": "3.1.0", 65 "xlsx": "0.14.1" 66 },
    //开发模式依赖项,注意开发模式依赖其实是包含生产环境依赖的
67 "devDependencies": { 68 "@babel/core": "7.0.0", 69 "@babel/register": "7.0.0", 70 "@vue/cli-plugin-babel": "3.5.3", 71 "@vue/cli-plugin-eslint": "^3.9.1", 72 "@vue/cli-plugin-unit-jest": "3.5.3", 73 "@vue/cli-service": "3.5.3", 74 "@vue/test-utils": "1.0.0-beta.29", 75 "autoprefixer": "^9.5.1", 76 "babel-core": "7.0.0-bridge.0", 77 "babel-eslint": "10.0.1", 78 "babel-jest": "23.6.0", 79 "chalk": "2.4.2", 80 "chokidar": "2.1.5", 81 "connect": "3.6.6", 82 "eslint": "5.15.3", 83 "eslint-plugin-vue": "5.2.2", 84 "html-webpack-plugin": "3.2.0", 85 "husky": "1.3.1", 86 "lint-staged": "8.1.5", 87 "sass": "^1.26.2", 88 "runjs": "^4.3.2", 89 "sass-loader": "^7.1.0", 90 "script-ext-html-webpack-plugin": "2.1.3", 91 "serve-static": "^1.13.2", 92 "svg-sprite-loader": "4.1.3", 93 "svgo": "1.2.0", 94 "vue-template-compiler": "2.6.10" 95 },
    //指明项目运行的node版本
96 "engines": { 97 "node": ">=8.9", 98 "npm": ">= 3.0.0" 99 },
    //与浏览器兼容性相关的配置:https://www.jianshu.com/p/d45a31c50711
100 "browserslist": [ 101 "> 1%", 102 "last 2 versions" 103 ] 104 }

 关于在dependencies中有的对象加了@的官方相关解释。

以及

区分不同registry

这边并没有理解透彻。暂时先放一下。

同时现在对webpack的知识了解不够,devdependencies中的依赖项包含一些loader,当然dependencies是没有的。

从逻辑上,我个人倾向于认为这两个依赖配置只与代码依赖模块相关。但是devdependencies中的某些配置与项目的生成是相关的。