经过不断的迭代,Win10 下已经发布多时的 Linux 子系统(WSL - Windows Subsystem for Linux)现在已经比较成熟了;WSL 默认只是不带图形化界面的终端窗口,这个由开放心态带来的新组合,补齐了 Windows 在终端操作和包管理等方面的短板,加上 windows 下丰富的软件生态,开发体验上已经可以简单类比甚至局部超越 macOS 了。
系统的安装和配置方法网上有很多了,本文将主要配置过程记录下来,并尝试指出一些前端开发项目中要特别注意的地方。
安装 ubuntu
按此文设置(看完“运行WSL”章节即可):Win10 安装 Linux 子系统,本文以安装了 Ubuntu 为例
系统版本比较新的可以按这篇 Win10 安装 Linux 子系统 (wsl2) 安装
需要注意,装完后的实际目录在
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
查看 https://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 software-properties-common
# 版本号可以换成 12.x 等
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs
# 检查版本(若不成功可以重启 wsl 命令行窗口再试)
node -v
npm -v
设置git和公钥
# 全局设置
git config --global user.name YOURNAME
git config --global user.email YOURNAME@foo.com
# 生成
ssh-keygen -t rsa -C "YOURNAME@foo.com"
# 查看
cat .ssh/id_rsa.pub
使用 VSCode 开发 WSL 下的项目
无论是 WSL1 还是 WSL2,和 windows 环境下的原生软件结合工作时都还有一定局限性。比如普遍用 webpack 热更新 驱动的前端开发项目,虽然 npm 命令能正常运行,但在 win10 下的编辑器软件中更改项目代码后,仍无法完成整个开发工作流:
最早期的 WSL 根本监听不到文件变化,webpack 实时编译不执行
较新的 win10 版本中可以正常监听并重新编译,但浏览器不会随之更新
目前唯一成功的方案是在 VSCode 中结合插件达成的,按文档 https://code.visualstudio.com/docs/remote/wsl 做如下设置:
在 VSCode 中安装 Remote Development 扩展包
在 wsl 窗口中进入要开发的项目目录,运行
code .
安装必要的组件VSCode 自动重启后,在 wsl 中运行 npm 命令正常开发即可
同时要注意这里项目中的 npm 依赖项要在 wsl 环境下重新 install,原来在 cmd / powershell 下安装过的是无效的。
结合 WSL 使用 Docker in Windows10
如果项目涉及到要用 docker 打包,可以在 win10 中先安装好 Docker,并作如下设置:
开启 Docker in Windows10 设置中的 Expose daemon on localhost:2375 without TLS
sudo usermod -aG docker $USER
sudo apt-get install -y python3 python3-pip
pip3 install --user docker-compose
echo "export DOCKER_HOST=tcp://localhost:2375" >> ~/.zshrc && source ~/.zshrc
--End--
查看更多前端好文
请搜索 fewelife 关注公众号
转载请注明出处