找回密码
 注册
首页 ≡≡网络技术≡≡ WEB前端 前端开发,说说package.json

框架 前端开发,说说package.json

灰儿 2022-8-2 18:12:56

如今的前端开发早已不是当年的那个单纯的前端开发。


从多页面到单页面,从零散的项目结构到项目模块化,自动化。


前端开发逐渐变得复杂又简单。


package.json是什么

现在的前端项目,根目录下面都会存在这样一个文件,package.json。单从文件格式来看,就是一个json类型的文件,文件内容也符合json类型。


这个文件可以在搭建项目之初,手动创建,也可以通过npm init 命令生成。


package.json有什么作用


1,对整个项目描述,项目名称,版本等;

2,管理你本地安装的npm包,用于定义了这个项目所需要的各种模块,记录模块信息(比如名称、版本、许可证等元数据);

3,方便搭建项目,有现成的项目配置文件pakage.json,便可以很方便的一键构建项目。


package.json包含内容说明

name

项目名称,必须是唯一的,由小写英文字母、数字和下划线组成,不能包含空格 ,长度必须小于等于214个字符,不能以"."(点)或者"_"(下划线)开头,不能包含大写字母。


version

项目版本号,需符合版本号语义。


author

项目开发者,它的值是你在https://npmjs.org网站的有效账户名,遵循“账户名<邮件>”的规则。


description

项目描述,项目的简要说明 。


keywords

项目关键字,是一个字符串数组,便于用户搜索到我们的项目。

  1.   "keywords": [
  2.     "vue",
  3.     "layer",
  4.     "vue-layer",
  5.     "zuoyan"
  6. ],
复制代码

homepage

定义项目url主页


bugs

提交bug的地址,项目问题反馈的Url或email配置,如:

  1.   "bugs": {
  2.     "email": "",
  3.     "url": ""
  4. }
复制代码

license

软件授权条款,让用户知道他们的使用权利和限制。这个是你如果上架npm依赖,或者开源项目。默认是”ISC”


author

项目作者


private

是否私有,设置为 true 时,npm 拒绝发布。


scripts

执行 npm 脚本命令简写,比如 "serve": "vue-cli-service serve", 执行 npm run serve就是运行 “vue-cli-service serve”。

  1.     "serve": "vue-cli-service serve",
  2.     "build": "vue-cli-service build",
  3.     "lib": "vue-cli-service build --target lib --name vue-layer --dest lib packages/layer/index.js",
  4.     "lint": "vue-cli-service lint"
复制代码

dependencies

生产环境下,项目运行所需依赖。


devDependencies

开发环境下,项目所需依赖。


--save参数表示将该模块写入dependencies属性,
--save-dev表示将该模块写入devDependencies属性。


config

config字段用于向环境变量输出值。


"config" : { "port" : "8080" },


engines

指明了该项目所需要的node.js版本

  1. "engines": {
  2. "node": ">= 4.0.0",
  3. "npm": ">= 3.0.0"
  4. }
复制代码

bin

内部命令对应的可执行文件的路径。


main

项目默认执行文件


module

是以 ES Module(也就是 ES6)模块化方式进行加载,因为早期没有 ES6 模块化方案时,都是遵循 CommonJS 规范,而 CommonJS 规范的包是以 main 的方式表示入口文件的,为了区分就新增了 module 方式,但是 ES6 模块化方案效率更高,所以会优先查看是否有 module 字段,没有才使用 main 字段。


eslintConfig

EsLint 检查文件配置,自动读取验证。


browserslist

供浏览器使用的版本列表。


style

供浏览器使用时,样式文件所在的位置;样式文件打包工具parcelify,通过它知道样式文件的打包位置。


files

被项目包含的文件名数组。


里面肯定没有写全,欢迎补充,探讨。


您需要登录后才可以回帖 登录 | 注册
学习中心
站长自定义文字内容,利用碎片时间,随时随地获取优质内容。
Q设计语言 了解更多
Q Design 提供商家设计所需的指导与资源,帮商家快速完成产品设计、降低生产成本。
学习中心
站长自定义文字内容,利用碎片时间,随时随地获取优质内容。
Q设计语言 了解更多
Q Design 提供商家设计所需的指导与资源,帮商家快速完成产品设计、降低生产成本。