Front-end xoay quanh

Trong file package.json thì có những gì?

What is in the package json file

1. Mở đầu

Package.json là một file rất quan trong trong một dự án Fe là rất quan trong. Nó dùng để quản lí các dependency, devDependency, script, thông tin app, version, …

Việc bạn hiểu được file này sẽ giúp cho công việc của bạn được thuận tiện hơn, có thể điều tra được các bug liên quan đến version hay xung đột library, …

Khi nhìn vào file package.json ta cũng có thể nhận xét qua được dự án đang ở mức độ nào, có cần dùng nhiều công nghệ mới không, …

2. Chi tiết

package.json là một file để định nghĩa meta-data, các câu lệnh để build hay start app, … Nó giống như pom.xml khi ta dùng maven với Java vậy ^^ Nói vậy là nhiều bạn làm Java hiểu rồi.

Các bạn có thể thấy file này hết sức dễ dàng khi vào 1 project có dùng NodeJS làm môi trường như: VueJS, ReactJS hay Angular 2+, … Hoặc nếu không bạn cũng hoàn toàn có thể tự tạo ra một file package bằng cách gõ npm init hoặc yarn init. Hệ thống của node sẽ hỏi bạn một số câu hỏi, như tên project, version, author, … bạn cứ nhập đầy đủ nhé không thì cứ ấn enter thôi. ^^ Sau đó, ta có 1 file với tên là package.json và nội dung như sau:

{
  "name": "test_package",
  "version": "1.0.0",
  "description": "This is a description",
  "main": "index.js",
  "author": "chamdev.com",
  "license": "MIT"
}

Đầu tiên các bạn có thể thấy nó có định dạng là JSON với các cặp {"key": "value"}. Tương ứng với nó là một dạng thông tin nhé. Ở bài này chúng ta sẽ đi qua những thông tin quan trọng mà bạn cần biết thôi. ^^

Sau đây là một ví dụ nho nhỏ, dự án càng to, dùng càng nhiều thư viện thì file này càng to nhé ^^:

{
    "name": "test_package",
    "version": "1.0.0",
    "description": "This is description",
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "author": "chamdev.com",
    "license": "ISC",
    "dependencies": {
        "axios": "^0.19.2",
        "bootstrap": "^4.4.1",
        "core-js": "^3.6.4",
        "vue": "^2.6.11",
        "vue-router": "^3.1.6"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.2.0",
        "@vue/cli-plugin-eslint": "~4.2.0",
        "@vue/cli-service": "~4.2.0",
        "babel-eslint": "^10.0.3",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.1.2",
        "vue-template-compiler": "^2.6.11"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "parserOptions": {
            "parser": "babel-eslint"
        },
        "rules": {}
    },
    "repository": {
      "type": "git",
      "url": "https://github.com/gfg/gfg.git"
    },
    "bugs": {
      "url": "https://github.com/gfg/gfg/issues"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions"
    ]
}

Nhưng thông tin chúng ta cần biết:

name: Là tên của app/project.
version: Là phiên bản của app, phiên bản này nó có 1 quy luật riêng nhé các bạn X.Y.Z
description: Đây là phần mà miêu tả app chung nhất như là: Mục đích app, main của app, hay là app đang dùng công nghệ gì.
main: Phần này trong file trên không có vì nó đang chạy với engine trong VueJS, nhưng nếu các bạn làm việc với NodeJS thì phải cần nhé. Nó sẽ là file root init các Middle ware cho toàn bộ Server nodejs

scripts: Đây là một thuộc tính rất quan trọng dùng để chạy các lệnh bên trong app. Như ví dụ bên dưới:

"scripts": {
      "client": "cd client && yarn start",
      "start": "node src/server.js",
      "server": "nodemon src/server.js",
      "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build",
      "install": "cd client && npm install && npm install",
      "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  },

Như các bạn có thể thấy rõ là ngoài định nghĩa được script mới thì ta còn có thể gọi các script này bằng script khác cũng như gọi lại nhiều script để đỡ phải gõ lại nhiều lần.

engines: Đây là thông tin quan trọng để nói với người setup khi mà muốn triển khai code này ở đâu (nhưng với Nodejs thôi nhé Front-end Framework không cần cái này).
author: Ở đây là tác giả đã viết ra app này.
license: Đây là phần giấy phép (Mình không hiểu cái này lắm MIT hoặc không ghi cũng được).
dependencies: Đây là một key rất quan trọng vì bên trong này sẽ có thể config các package dành cho app. Đây là những package cần thiết cho app chạy được trên môi trường Product.
devDependencies: Đây cũng là một key rất quan trọng khác vì nó định nghĩa những cái chúng ta cần để có thể Development ứng dụng của chúng ta. Nhưng hãy chú ý là khi mà chúng ta build lên môi trường Product thì không cần dùng đến những packgae này.

Ngoài ra còn rất nhiều thuộc tính khác nhưng mình không đề cập ở đây các bạn hãy xem đường link bên dưới nhé.

Chú ý: Chúng ta hãy để ý là trong dependency và devDependency có các kí tự đặc biệt về version, mình nghĩ là các bạn không nên sửa nhé, nên để mặc định thì tốt hơn. Vì nhỡ đâu nó xung đột với nhau.

  • "*" Nếu như này thì npm sẽ install cho bạn phiên bản mới nhất của package.
  • [version] Giữ nguyên version hiện tại.
  • "~1.5.2" dấu ~ cho quy định cho npm sẽ tìm tất cả các phiên bản có dạng 1.5.x (từ >=1.5.0 đến <1.6.0 )
  • "^1.0.5" version từ 1.0.5 đến <1.1.0
  • >[version]: version phải lớn hơn version hiện tại.
  • >=[version]: version phải lớn hơn bằng version hiện tại.
  • <[version]: version phải nhỏ hơn version hiện tại.
  • <=[version]:  version phải nhỏ hơn bằng version hiện tại.

3. Kết luận

Như vậy đây là một file meta data rất quan trọng mà các bạn cần phải biết để tiến được xa hơn nhé.

Ngoài cách dùng lệnh để tạo file thì các bạn cũng hoàn toàn có thể tự viết từ đầu rồi dùng như bình thường nhé. Nhưng phải đúng tên là package.json vì môi trường NodeJS nó chỉ chấp nhận tên và format như vậy thôi. @@

4. Tham khảo

# Node.js | package.json
# The Basics of Package.json in Node.js and npm
# Creating a package.json file
# npm-semver

Tagged , , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
AhihiDev
AhihiDev
1 year ago

Hay lắm người anh em :))