在win10的Ubuntu子系統中設置前端開發環境

隨着最近 Windows Terminal 新終端工具的推出，又關注和實踐了一下 Win10 下 已經發布多時的 Linux 子系統（WSL - Windows Subsystem for Linux）。

通過不斷的迭代，該系統如今已經比較成熟了；Win10 中的 Linux 子系統默認只是不帶圖形化界面的終端窗口，這個由開放心態帶來的新組合，補齊了 Windows 在終端操做和軟件包生態等方面的短板，開發體驗上和能夠簡單類比 macOS 了。

系統的安裝和配置方法網上有不少了，本文將主要配置過程記錄下來，並嘗試指出一些前端開發項目中要特別注意的地方。

安裝 ubuntu

• 按此文設置（看完「運行WSL」章節便可）： Win10 安裝 Linux 子系統，本文以安裝了 Ubuntu 爲例
• 須要注意，裝完後的實際目錄在 C:\Users\<YOURNAME>\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_<HASH>\LocalState\rootfs；能夠酌情在桌面建立快捷方式等

查看子系統版本

lsb_release -a
複製代碼

記錄下 18.04 等版本，便於相關配置項的選擇

更換軟件源

這是個可選的步驟，用速度更快的國內的軟件源替換默認的官方地址。

首先備份原配置：

sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
複製代碼

查看 opsx.alibaba.com/mirror 中 ubuntu(上一步查出的對應版本) 的「幫助」，

參考其說明後，其實直接作如下替換操做便可：

• 打開/etc/apt/sources.list，替換默認的//archive.ubuntu.com/等url爲//mirrors.aliyun.com

# 以 vim 編輯器爲例，替換語句爲：
%s/\(\/\/\)\(.*\)\.ubuntu\.com/\/\/mirrors\.aliyun\.com/g
複製代碼

更新系統軟件

sudo apt-get update && sudo apt-get -y upgrade
複製代碼

安裝 git 和 oh-my-zsh

oh-my-zsh 是 linux/macOS 上通用的一個 shell 優化框架，能夠很好的支持 git 等；依次執行如下命令：

sudo apt-get install zsh
chsh -s /bin/zsh

# 把第一行的/bin/bash改爲/bin/zsh，最後一行一樣檢查一下
sudo vim /etc/passwd

sudo apt-get install git

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
複製代碼

安裝 nodejs

sudo apt-get install curl python-software-properties

# 版本號能夠換成 12.x 等
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

sudo apt-get install -y nodejs
複製代碼

!!!安裝完必定要重啓 ubuntu 命令行窗口

# 檢查版本
node -v
npm -v
複製代碼

設置git和公鑰

# 全局設置
git config --global user.name YOURNAME
git config --global user.email YOURNAME@jd.com
# 生成
ssh-keygen -t rsa -C "YOURNAME@jd.com"
# 查看
cat .ssh/id_rsa.pub
複製代碼

前端開發 webpack 項目特別注意

這裏算是本文的重點，以如今常見的 webpack 項目爲例，環境搭好後，在 ubuntu 終端窗口中用 git 拉下來前端項目、安裝依賴包、嘗試打包，都很正常。

當運行開發模式，也能正確跑起來並自動打開瀏覽器什麼的；但問題可能出如今熱加載的時候，也就是說當咱們用 Windows 下平時慣用的 VSCode 等編輯器修改文件時，ubuntu 窗口中可能會沒有任何反應、不會從新編譯。

這裏的關鍵其實就是要設置一下 webpack 中的 watchOptions；檢查一下如下的狀況，並作相應的設置，重啓 webpack 後應該就能正確工做了：

• 若是是純 webpack 項目（或暴露 webpack 配置的 vue cli 1/2 項目），在 webpack.config.js 中設置：

devServer: {
  ...
  watchOptions: {
    poll: 1000
  }
}
複製代碼

• 若是是由 vue cli 3 生成的項目，在 vue.config.js 中配置：

configureWebpack: {
  devServer: {
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  },
},
複製代碼

• 若是項目中有 storybook，在 .storybook/webpack.config.js 中設置：

config.watchOptions = {
  aggregateTimeout: 300,
  poll: 1000
};
複製代碼

VSCode 中設置 wsl

• 若是用的是 VSCode，也能夠在其內置終端的相關選項中找到 "Select Default Shell"，並選擇 「WSL Bash」

# 上一步其實就是在 settings.json 中設置以下一行
"terminal.integrated.shell.windows": "C:\\windows\\System32\\wsl.exe"
複製代碼

• 在左側 EXPLORER 中某個項目上右鍵 「Open in Terminal」 後，能夠在內置終端窗口打開 ubuntu，但默認是打開系統根目錄 /；此處還沒有找到有效解決辦法，須要手動 cd 到相關目錄

--End--

搜索 fewelife 關注公衆號

轉載請註明出處