专栏首页云前端在win10的WSL中设置前端开发环境

在win10的WSL中设置前端开发环境

经过不断的迭代,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),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 初探在WSL中设置vim前端开发环境

    在之前的 《在win10的WSL中设置前端开发环境》 一文中,介绍了 win10 结合其 linux 子系统(WSL)的前端开发设置,使用的是 VSCode 开...

    江米小枣
  • 配置方案(Win10+WSL) | 为气象科研人员量身打造一站式高效的科研生产力计算机

    曾作为忠实的果粉,对于macOS的喜爱是无可替代的,并不是秀优越,毕竟ThinkPad X1等诸多电脑价格并不比MacBook Pro便宜,抛开硬件层面,苹果生...

    气象学家
  • win10中利用WSL搭建Linux子系统开发环境 顶

    在win10中使用Linux环境,不用安装虚拟机就,不用安装双系统,不用切换系统,直接在win10中使用Linux系统。

    bdcn
  • Windows安装WSL--Ubuntu

    WSL(Ubuntu)将Ubuntu和Win10无缝连接起来,让开发人员可以不使用虚拟机,就轻松地在同一个系统中使用win10和Ubuntu,你可以用它代替Cy...

    php007
  • WSL+cmder+oh-my-zsh美化win10命令工具(terminal)

    最近在win10下面搭建了一个 WSL+cmder+oh-my-zsh 的程序员命令行环境,为什么呢?还不是买不起mac,加上自己的黑苹果瘫了,所有又回到了wi...

    踏浪
  • WSL 下搭建前端开发环境

    cnguu
  • vscode配置远程开发环境

    在远端的服务器Linux系统没有IDE界面,vscode界面部署在个人电脑。通常大多数的开发和编辑环境都是系统隔离的。

    mariolu
  • linux c++开发环境_玩转 WSL 在 Win10 上打造 Linux 开发环境

    WSL 是 Windows Subsystem for Linux 的简称, 可让开发人员按原样运行 GNU/Linux 环境 - 包括大多数命令行工具、实用工...

    用户7886150
  • Win10构建Python全栈开发环境W

    最后,我实在不想自己总结了,因为有人给我们总结的已经非常非常好了,直接跳转去学习吧《Dev on Windows with WSL》

    py3study
  • Win10 WSL + Linux 开源 EDA(三)

    上一篇我们安装了开源 Verilog 仿真器 EpicSim。既然是仿真,就会有通过波形 debug 的需求。这篇我们来安装一款开源的 VCD 波形查看器, G...

    icsoc
  • win10配置linux子系统使用python绘图并显示--WSL使用GUI输出

    默认情况下,Win10的linux子系统(WSL)是只能使用命令行程序的。所有图形界面的程序都无法执行。

    俺踏月色而来
  • WSL2:Windows 亲生的 Linux 子系统

    在上一篇文章中,我们主要聊了一下:在 Windows 系统中,安装 WSL 子系统。

    IOT物联网小镇
  • WSL2:Windows 亲生的 Linux 子系统

    在上一篇文章中,我们主要聊了一下:在 Windows 系统中,安装 WSL 子系统。

    Linux阅码场
  • 再见虚拟机!聊聊 PC 端运行 Docker 的正确姿势!

    在相当长的一段时间里,PC 端要使用 Linux 系统的方案都是:WMware/Oracle VM VirtualBox + Linux

    AirPython
  • Windows 系统中安装 WSL 子系统

    在 Windows 命令行窗口,输入指令:wsl --list --verbose(或者输入简化版本:wsl -l -v),得到结果:

    时代疯
  • 让windows 10 内置ubuntu(WSL)成为扩增子分析生产力

    先提示下,由于现在大部分电脑的win10版本是1903或者更低,wsl的性能相比2004版本的wsl2有一定差距。据说前者不是真正的linux内核,后者才是。又...

    用户1075469
  • 为 Windows 10 新增物理网卡子接口

    本文首发于:https://blog.frytea.com/archives/525/

    宋天伦
  • Windows 安装和配置 WSL

    我们简单的认为它是在 Windows 上安装了一个 Linux 环境就好了。也就是最好的 Linux 发行版:Win10 + WSL (滑稽)。

    希希里之海
  • win10重新安装导出的WSL2镜像

    https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

    impressionyang

扫码关注云+社区

领取腾讯云代金券