Файл package.json в Node.js

Программирование, разработка, тестирование

→

Node.js (это web сервер исполняющий js файлы)

→

npm в Node.js

→

Файл package.json в Node.js

Посмотрели 3249 раз(а)

Файл package.json в Node.js

последнее обновление: 7 августа 2020

package.json это файл в котором содержится:

Название секции

Описание

"dependencies": {
...
}

Секция "dependencies" содержит названия и версии пакетов, которые используются при реальной работе проекта (запуске проекта).

Пример

"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}

На заметку! Команда npm install имя_пакета
автоматически добавляет имя пакета в секцию "dependencies" в файл package.json

Еще на заметку! Команда npm install не меняет файл package.json
Вот что произойдет:
1) Прочитаются все названия пакетов и версии из файла package.json из секций "dependencies" и devDependencies
2) Пакеты (по названию и версии) будут скачиваться с интернета в папку node_modules.

"devDependencies": {
...
}

Секция "devDependencies" содержит названия и версии пакетов, которые используются при разработке проекта (компилировании проекта).

Самый простой пример webpack всгда размещается в секции "devDependencies". Потому что webpack запускается только чтобы объединить все js файлы в один (то есть для компиляции проекта).

Пример

"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
}

На заметку! Команда npm install --save-dev имя_пакета
автоматически добавляет имя пакета в секцию "devDependencies" в файл package.json

Еще на заметку! Команда npm install не меняет файл package.json
Вот что произойдет:
1) Прочитаются все названия пакетов и версии из файла package.json из секций "dependencies" и devDependencies
2) Пакеты (по названию и версии) будут скачиваться с интернета в папку node_modules.

"scripts": {
...
}

В секции "scripts" мы пишем скрипты, которые можно запускать.

Чтобы запустить скрипт нужно в командной строке выполнить:

npm run имя_скрипта

Пример 1. Файл package.json

"scripts": {
"EvgenConvertCSS": "node-sass --include-path scss 1.scss 1.css"
}

выполняем в командной строке:

npm run EvgenConvertCSS

Запустится мой скрипт EvgenConvertCSS, то есть выполнится node-sass который, сконвертирует файл 1.scss в файл 1.css
Читать подробнее: node-sass конвертация файла 1.scss в файл 1.css ...

Пример 2. Файл package.json

"scripts": {
"EvgenMyCommand": "mkdir AAA"
}

выполняем в командной строке:

npm run EvgenMyCommand

Запустится мой скрипт EvgenMyCommand, то есть выполнится командная строка "mkdir AAA", а это создание папки AAA
Читать подробнее: npm выполнение командной строки "mkdir AAA" ...

Пример 3. Файл package.json

"scripts": {
"MyScript1": "npm run MyScript2",
"MyScript2": "какой нибудь скрипт!!!"
}

выполняем в командной строке:

npm run MyScript1

Запустится мой скрипт MyScript1,
Скрипт MyScript1 выполнит скрипт MyScript2
Читать подробнее: npm выполнение скрипта выполняющий другой скрипт ...

Зачем мы устанавливаем пакеты в разные секции "dependencies" и "devDependencies" в файле package.json?

Пакеты в секции "devDependencies" я использую только для вызова в скриптах (секция "scripts")

Пример 1
Рассмотрим React приложение

В React приложении у меня файл package.json

{
     "name": "my_react_example1",

     "scripts": {
          "MyBuild": "webpack"
     },

     "dependencies": {
          "react": "^16.13.1",
          "react-dom": "^16.13.1"
     },

     "devDependencies": {
          "babel-core": "^6.26.3",
          "babel-loader": "^7.1.5",
          "babel-preset-react": "^6.24.1",
          "webpack": "^4.43.0",
          "webpack-cli": "^3.3.12",
          "webpack-dev-server": "^3.11.0"
     }
}

В командной я запускаю скрипт, чтобы скомпилировать проект

npm run MyBuild

Скрипт MyBuild определен в файле package.json.
...
    "scripts": {
        "MyBuild": "webpack"
    }
...

Скрипт MyBuild запустит webpack
Скрипт знает что такое webpack потому что мы установили пакет webpack в секции "devDependencies"

webpack соберет мой js файл и пакеты React в один выходной js файл.
Пакеты React находятся в секции "dependencies".
Потому что выходной js файл будет использовать React функциональность.

На заметку!
При компиляции проекта (запукается webpack) и webpack для каждого js файла будет запускать Babel.
Babel в каждом js файле сконвертирует JSX код в JavaScript во время компиляции проекта.
Поэтому Babel пакет установлен в секции "devDependencies".

Читать подробнее: React приложение ...

Пример 2
Рассмотрим TypeScript приложение

В TypeScript приложении у меня файл package.json

{
     "name": "my_typescript_example",

     "scripts": {
          "MyBuild": "webpack"
     },

     "dependencies": {
     },

     "devDependencies": {
          "webpack": "^4.32.0",
          "webpack-cli": "^3.3.2",
          "webpack-dev-server": "^3.4.1",
          "typescript": "^3.9.7",
          "awesome-typescript-loader": "^5.2.1"
     }
}

В командной я запускаю скрипт, чтобы скомпилировать проект

npm run MyBuild

Скрипт MyBuild определен в файле package.json.
...
    "scripts": {
        "MyBuild": "webpack"
    }
...

Скрипт MyBuild запустит webpack
Скрипт знает что такое webpack потому что мы установили пакет webpack в секции "devDependencies"

webpack соберет ts файлы в один выходной js файл.

На заметку!
При компиляции проекта (запукается webpack) и webpack для каждого ts файла будет запускать TypeScript.
TypeScript каждый ts файл сконвертирует в js файл во время компиляции проекта.
Поэтому TypeScript пакет установлен в секции "devDependencies".

Читать подробнее: TypeScript приложение ...

← Предыдущая тема
Как обновить версию npm (установить последнюю версию) ? | Node.js

Следующая тема →
Разница между тильдой(~) и крышкой(^) в package.json | Node.js