package.json配置简介

我们先看一个常用的例子

{
// 包的名称"name": "buyer_wxs",// 包的版本号"version": "0.1.0",//不开源"private": true,// 指定了运行脚本命令的npm命令行缩写"scripts": {"serve": "vue-cli-service serve",   //正式服，直接运行npm run build"build": "vue-cli-service build --mode test",  "build:test": "vue-cli-service build --mode test",  // 测试服，相当于命令行：npm run build:test"test": "vue-cli-service build --mode test"},//项目运行必须安装的依赖生产环境的依赖包列表"dependencies": {"@xkeshi/vue-qrcode": "^1.0.0","amfe-flexible": "^2.2.1","axios": "^0.19.0","clipboard": "^2.0.4","core-js": "^2.6.5","postcss-pxtorem": "^4.0.1","qrcodejs2": "^0.0.2","vant": "^2.2.7","vue": "^2.6.10","vue-axios": "^2.1.4","vue-cookie": "^1.1.4","vue-router": "^3.0.3","vuex": "^3.0.1","weixin-js-sdk": "^1.4.0-test"},//  // 开发环境的依赖包列表"devDependencies": {"@vue/cli-plugin-babel": "^3.11.0","@vue/cli-plugin-eslint": "^3.11.0","@vue/cli-service": "^3.11.0","babel-eslint": "^10.0.1","babel-plugin-import": "^1.12.1","eslint": "^5.16.0","eslint-plugin-vue": "^5.0.0","less": "^3.10.3","less-loader": "^5.0.0","postcss-px-to-viewport": "^1.1.1","style-resources-loader": "^1.2.1","vue-cli-plugin-style-resources-loader": "^0.1.3","vue-template-compiler": "^2.6.10"}
}

我们来详细说明一下文件中各个字段的含义与用法
简单关键字说明
name, version, description, main, author, license通过字面意思即可理解，

需要说明的是，

version标注了当前项目的版本号，如果是私有项目，不发布到仓库（repository）,此项关键字可以不用变更；

main是我们模块或者是项目的入口文件，有且只有一个文件，文件的路径是相对项目的根目录；

license是标注我们项目的许可证权限，如果是开源项目，请参考阮一峰开源许可证教程。

如果不想开源，可以使用

{ "license": "UNLICENSED" }

或者

{ "private": true }

重点关键字说明
scripts，dependencies，devDependencies

首先我们来看看scripts

scripts是npm提供给我们运行shell命令的入口

 "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build --mode test","build:test": "vue-cli-service build --mode test","test": "vue-cli-service build --mode test"},

我们可以通过npm run build启动webpack --config webpack.config.js

这条命令等同于在命令行中输入webpack --config webpack.config.js

例子中syncbuild是前两步的合并，build为编译，sync为同步文件
这里的key为npm run时接受的参数，value代表着需要运行shell命令

dependencies与devDependencies看起来差不多，他们都是标注项目的依赖列表

不同的是，dependencies是项目运行时必要依赖，而devDependencies是项目开发时所需依赖

明确了以上的不同，就可以很清晰知道把项目依赖放在哪里了

平时使用的时候我们会通过

npm i --save react

安装依赖，此依赖会写入dependencies列表

如需将依赖写入devDependencies
这里还有一点需要注意，我们的项目在发布后，他人在使用时默认会将dependencies列表的依赖全部安装

npm i packagename
或者
npm i packagename --production

如果需要安装开发环境

npm i packagename --dev

这样会将项目的开发依赖包全部安装到本地

package.json配置简介相关推荐

用package.json配置NodeJS项目的模块声明
在NodeJS项目中,用package.json文件来声明项目中使用的模块,这样在新的环境部署时,只要在package.json文件所在的目录执行 npm install 命令即可安装所需要的模块. ...
nodejs的package.json配置参数
一直对node设置package.json的参数不甚了解,借着vscode工具的注释,我把package.json中的options全部展示一下,中文注释部分可能不是package.json里的配置参 ...
vue cli3 热更新保存时自动刷新页面内容 + 分离环境变量.env package.json配置
前几天ts+vue3.0+view-design撸了一个项目,然后总感觉哪里不对劲,今天终于醒悟了原来是热更新没开在vue.config.js中配置以下选项 const IS_PRO = ['pro ...
npm与package.json
[背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [npm与package.json] 今天给大家分享的 ...
【设置版本号】React Native 通过配置文件package.json设置 Android安卓和iOS版本号
目录: 版本说明安卓配置内容 iOS配置内容最终效果(修改配置文件package.json,安卓和iOS自动修改版本号) 一.版本说明本机系统: Mac Android studio: 3.6. ...
vue3 工程package.json说明
package.json配置了解. /** 对项目或者模块包的描述,里面包含许多元信息.比如项目名称,项目版本,项目执行入口文件等等.* npm install 命令会根据这个文件下载所有依赖模块. ...
配置根目录_npm配置文件package.json里面的字段你知道多少
嗨!新的一天get点什么功能呢?来聊聊npm的配置文件吧! 创建一个前端项目目前都离不开npm包管理工具,所以根目录必须有一个package.json文件如何创建呢? 1)懒人操作:项目根目录直接黑 ...
node中模板引擎、模块导出、package.json简介
在node.js中使用引擎模板: art-template不仅在浏览器可以使用,也可以在node中使用,并且模板引擎起早诞生于服务器领域,在node中使用模板引擎: 1.安装:在一个文件目录下执行命令 ...
android中json插件,【Android原生插件】package.json中关于第三方aar的配置
按照文档(https://ask.dcloud.net.cn/article/35414)所说: dependencies节点特殊说明 android插件中集成的第三方SDK 如果是jar或so放入到 ...
【前端工程化】配置package.json中scripts命令脚本，新手必学
每日鸡汤:你总要努力追上那个曾经被赋予众望的自己吧目录前言一.运行npm run 命令之后会干啥? 1. scripts里面写啥 2. node_modules/.bin 二进制可执行文件二. ...

package.json配置简介

package.json配置简介相关推荐

最新文章

热门文章