灰儿 发表于 2022-8-2 18:12:56

前端开发,说说package.json

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

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

前端开发逐渐变得复杂又简单。
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项目关键字,是一个字符串数组,便于用户搜索到我们的项目。"keywords": [
    "vue",
    "layer",
    "vue-layer",
    "zuoyan"
],homepage定义项目url主页
bugs提交bug的地址,项目问题反馈的Url或email配置,如:"bugs": {
    "email": "",
    "url": ""
}license软件授权条款,让用户知道他们的使用权利和限制。这个是你如果上架npm依赖,或者开源项目。默认是”ISC”
author项目作者
private是否私有,设置为 true 时,npm 拒绝发布。
scripts执行 npm 脚本命令简写,比如 "serve": "vue-cli-service serve", 执行 npm run serve就是运行 “vue-cli-service serve”。    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name vue-layer --dest lib packages/layer/index.js",
    "lint": "vue-cli-service lint"

dependencies生产环境下,项目运行所需依赖。
devDependencies开发环境下,项目所需依赖。
--save参数表示将该模块写入dependencies属性,
--save-dev表示将该模块写入devDependencies属性。
configconfig字段用于向环境变量输出值。
"config" : { "port" : "8080" },
engines指明了该项目所需要的node.js版本"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}bin内部命令对应的可执行文件的路径。
main
项目默认执行文件
module是以 ES Module(也就是 ES6)模块化方式进行加载,因为早期没有 ES6 模块化方案时,都是遵循 CommonJS 规范,而 CommonJS 规范的包是以 main 的方式表示入口文件的,为了区分就新增了 module 方式,但是 ES6 模块化方案效率更高,所以会优先查看是否有 module 字段,没有才使用 main 字段。
eslintConfigEsLint 检查文件配置,自动读取验证。
browserslist供浏览器使用的版本列表。
style供浏览器使用时,样式文件所在的位置;样式文件打包工具parcelify,通过它知道样式文件的打包位置。
files被项目包含的文件名数组。
里面肯定没有写全,欢迎补充,探讨。
页: [1]
查看完整版本: 前端开发,说说package.json