---
# System prepended metadata

title: 環境安裝

---

### nvm、node.js環境安裝
:::success
1. 安裝nvm環境，[nvm-setup](https://github.com/coreybutler/nvm-windows/releases)

```
    nvm list available(LTS長期支援) > nvm install {版本} > nvm use {版本}
    nvm ls-remote：列出目前可用的遠端 Node.js 版本
    nvm list available : 查看有哪些Node.js 版本可以安裝
    nvm install {版本}：安裝特定版本的 Node.js , 如 16
    nvm ls：列出本定端所安裝的 Node.js 環境
    nvm alias default node：設定命令列預設開啟的 Node.js 版本
    nvm use：當前命令列套用特定版本的 Node.js
```
:::
### webpack、node_env 環境安裝
:::warning
vscode開啟資料夾後
```
1. 終端機輸入 npm init ，
2. npm i webpack webpack-cli
   npm i cross-env --save-dev
   --save-dev(只安裝開發環境中)
```
3. 更改 package 的 script方法，調整執行webpack的key值 
 ```
#npm run key  -- mode production | development //包裝方式
"start": "cross-env NODE_ENV=production | development webpack"
```
4. 新增一個webpack-config.js，內容如下
```
var = require("path") //可以將相對路徑或路徑片段解析成絕對路徑

module.exports = {
mode:process.env.NODE_ENV,
context: path.resolve(__dirname,'./src'),
  entry:'./index.js',
  output: {
  path: path.resolve(__dirname,'dist'),
  filename: 'index-webpack.js'
  }
}
```

5. path.resolve() 方法，可以用來組路徑，讓你不用特地為了路徑的每層去加上「"/"」
```
let path = require('path');

console.log(__dirname);//E:\myPath\js
console.log(__filename);//E:\myPath\js\app.js

console.log(process.cwd());      //E:\myPath\js
console.log(path.resolve('./')); //E:\myPath\js
console.log(path.resolve('../'));//E:\myPath

console.log(path.resolve(__dirname, 'abc', 'def'));//E:\myPath\js\abc\def
console.log(path.resolve(__dirname, '../demo.js'));//E:\myPath\demo.js
console.log(path.resolve(__dirname, '..', 'views', 'index.html')); //E:\myPath\views\index.html
```

:::
### GIT 
:::info
![image](https://hackmd.io/_uploads/rJhjmqXCC.png)

:::

