---
# System prepended metadata

title: NPM
tags: [frontend & backend, NPM]

---

NPM
===
###### tags: `frontend & backend`
###### tags: `frontend & backend`, `NPM`

:::info
:bulb: **NPM**: Node Package Manager
:::

<br>

[TOC]

<br>

## [npm-install](https://docs.npmjs.com/cli/v8/commands/npm-install)
> Install a package

- `npm install` = `npm i`
- `npm --global` = `npm -g`

<br>

## [npm-pack](https://docs.npmjs.com/cli/v8/commands/npm-pack)
> Create a tarball(.tgz) from a package

<br>

## [npm-run-script](https://docs.npmjs.com/cli/v8/commands/npm-run-script)
`npm run-script` = `npm run`

<br>

### 顯示 script 清單
當你執行的 script 不在清單，會跳出錯誤訊息：
```
npm ERR! To see a list of scripts, run:
npm ERR!   npm run
```
```
$ npm run
```
![](https://i.imgur.com/Z7Y1saq.png)

<br>

### 單純呼叫 webpack (預設使用 production)
```json=
// package.json
{
   ...,
  "scripts": {
    "build": "webpack"
  }
}
```
```
$ npm run build
...
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
```

<br>

### 指定 config & mode 的 webpack
```json=
// package.json
{
   ...,
  "scripts": {
    "build": "webpack --config ./webpack.config.js --mode production"
  }
}
```
- 參考資料
    - [Webpack 4 取得模式 Mode 設定](https://medium.com/itsoktomakemistakes/-c42bddbe1c1c)