週二. 8 月 11th, 2020

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

Node JS 開發環境設定

2 min read
nodes develop

Node JS 開發環境設定:visual studio codenvm + node.js + webpack + Babel

 

nodes develop

 

  • 開發軟體下載
  1. nvm-windows : Download the latest installer from the releases 用來管理 node.js 的版本
  2. node.js
  3. webpack : 可以參考 Get Started quickly in our Guides section
  4. visual studio code
  5. babel-loader : 轉換 JS ES6 的編譯器 ( Babel is a JavaScript compiler. )

 

  • 先安裝  nvm : nvm-setup.zip,再利用 nvm 來安裝 node.js
D:\Progs\nodejs>nvm list available

|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|   13.12.0    |   12.16.2    |   0.12.18    |   0.11.16    |
|   13.11.0    |   12.16.1    |   0.12.17    |   0.11.15    |
|   13.10.1    |   12.16.0    |   0.12.16    |   0.11.14    |
|   13.10.0    |   12.15.0    |   0.12.15    |   0.11.13    |
|    13.9.0    |   12.14.1    |   0.12.14    |   0.11.12    |
|    13.8.0    |   12.14.0    |   0.12.13    |   0.11.11    |
|    13.7.0    |   12.13.1    |   0.12.12    |   0.11.10    |
|    13.6.0    |   12.13.0    |   0.12.11    |    0.11.9    |
|    13.5.0    |   10.20.0    |   0.12.10    |    0.11.8    |
|    13.4.0    |   10.19.0    |    0.12.9    |    0.11.7    |
|    13.3.0    |   10.18.1    |    0.12.8    |    0.11.6    |
|    13.2.0    |   10.18.0    |    0.12.7    |    0.11.5    |
|    13.1.0    |   10.17.0    |    0.12.6    |    0.11.4    |
|    13.0.1    |   10.16.3    |    0.12.5    |    0.11.3    |
|    13.0.0    |   10.16.2    |    0.12.4    |    0.11.2    |
|   12.12.0    |   10.16.1    |    0.12.3    |    0.11.1    |
|   12.11.1    |   10.16.0    |    0.12.2    |    0.11.0    |
|   12.11.0    |   10.15.3    |    0.12.1    |    0.9.12    |
|   12.10.0    |   10.15.2    |    0.12.0    |    0.9.11    |
|    12.9.1    |   10.15.1    |   0.10.48    |    0.9.10    |

D:\Progs\nodejs>nvm install 12.16.2
Downloading node.js version 12.16.2 (64-bit)...
Complete
Creating C:\Users\polin\AppData\Roaming\nvm\temp

D:\Progs\nodejs>nvm list

    12.16.2
  * 10.16.0 (Currently using 64-bit executable)
    10.15.3

D:\Progs\nodejs>nvm use 12.16.2
Now using node v12.16.2 (64-bit)

會建立一個捷徑  C:\Program Files\nodejs

nodejs_shortcut

指向實際的目錄 C:\Users\%username%\AppData\Roaming\nvm

nodejs_real_path

 

  • 在 windows 10 的環境

需先允許 power shell 可以執行,Ref: Managing the execution policy with PowerShell

PS C:\WINDOWS\system32> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
PS C:\WINDOWS\system32> Get-ExecutionPolicy -List

        Scope ExecutionPolicy
        ----- ---------------
MachinePolicy       Undefined
   UserPolicy       Undefined
      Process       Undefined
  CurrentUser       Undefined
 LocalMachine    RemoteSigned

powershell_enable

 

  •  webpack 建立基本開發環境

Get Started 建立基本環境參數

npm init -y
npm install webpack webpack-cli --save-dev

webpack_init

依 webpack官網 建立 webpack.config.js ,建立 index.html 並在目錄 src 下建立 index.js 檔案。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.bundle.js'
  }
};

然後執行 webpack

webpack_built

 

安裝 ( install )

npm install -D babel-loader @babel/core @babel/preset-env webpack

設定 ( configure)

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

 

在 index.js 寫一段 JS ES6 的程式碼

const arr = [1, 2, 3, 4, 5, 6];
arr.map(obj=>console.log(obj));

經過 webpack 後,在經過 Babel 的編譯後,dist/index.boundle.js 裡會轉譯成

([function(e,t){[1,2,3,4,5,6].map((function(e){return console.log(e)}))}])

 

 

 

 

 

 

 

Copyright © All rights reserved. | Newsphere by AF themes.