linux前端编译环境,WSL2 前端开发环境搭建

安装WSL2(Ubuntu为例)

装好之后吗，如果你确实需要删除某个子系统，可以通过下面的命令删除

$ wslconfig /l #显示出你安装的子系统

$ wslconfig /u name # name为你子系统的名字

删除子系统

安装node

在~路径下，下载node压缩包

$ cd ~

$ wget -c https://npm.taobao.org/mirrors/node/v12.18.0/node-v12.18.0-linux-x64.tar.xz

随后解压，并且重命名成nodejs

$ tar -xvf node-v12.18.0-linux-x64.tar.xz

$ mv node-v12.18.0-linux-x64 nodejs

接下来要考虑把它放在哪

/bin

This directory contains executable programs which are needed in single user mode and to bring the system up or repair it.

/sbin Like /bin, this directory holds commands needed to boot the system, but which are usually not executed by normal users

/usr/bin

This is the primary directory for executable programs. Most programs executed by normal users which are not needed for booting or for repairing the system and which are not installed locally should be placed in this directory

/usr/sbin

This directory contains program binaries for system administration which are not essential for the boot process, for mounting /usr, or for system repair

/usr/local/bin

Binaries for programs local to the site

/usr/local/sbin

Locally installed programs for system administration

这边打算把它放在/usr/sbin

mv ~/nodejs/ /usr/sbin/

做个软连接

ln -s /usr/sbin/nodejs/bin/node /usr/local/bin/

ln -s /usr/sbin/nodejs/bin/npm /usr/local/bin/

安装一些原生依赖

例如node-gyp等包可能需要编译一些原生C++模块，你可能需要安装make gcc g++等

apt-get install make gcc g++

当然还有python，例如比较新的Ubuntu已经自带了python3，我们也做个软连接就好了

ln -s /usr/bin/python /usr/local/bin/

其他设置

如果环境搭建好了，项目存放在子系统里，但是启动项目时候报错了，如下关键字。

Error: spawn cmd.exe ENOENT

或者

Error: spawn powershell.exe ENOENT

这里有解决方案，我就不搬运了

当然，在issue里搜有很多一样的问题和多种解决方案

安装vscode插件

下载Remote – WSL，或者在vscode插件面板里搜索WSL。

安装之后，就可以在子系统里使用code命令了，见下方官方gif。macos里也有这样的命令。

Gif opening VS Code from terminal to connect to WSL

好了，WSL2前端环境搭建好了，不过嘛，这东西挺耗内存的。

yarn start编译时

给Linux子系统安装zsh(推荐)

如果之前一直使用macos作为主力开发机器的话，zsh你应该用过或遇见过。

官方安装文档可以参考这里。其实很简单，首先安装

$ sudo apt-get install zsh

如果以下命令有输出，那么就安装成功了

$ zsh --version # => zsh 5.8 (x86_64-ubuntu-linux-gnu)

设置成默认的命令行工具

chsh -s /usr/bin/zsh

默认的ys主题已经比bash好看很多了。下图中全绿的那行是默认的bash

zsh

当然也可以随时在bash和zsh之间切换

$ zsh # 切换到zsh

$ bash # 切换到bash

安装oh-my-zsh

可以参考这里，可能对网络有要求。

安装oh-my-zsh插件

安装完毕之后，推荐一些插件，具体效果可以到github中查看

zsh-autosuggestions

oh-my-zsh的自带插件存放在~/.oh-my-zsh/plugins目录中，已经自带了很多，比如git。

oh-my-zsh插件

我们新加的插件放在~/.oh-my-zsh/custom/plugins中。

custom-gplugins

那么运行命令clone项目

$ git clone https://github.com/zsh-users/zsh-syntax-highlighting ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting

$ git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions

$ git clone https://github.com/zsh-users/zsh-completions ~/.oh-my-zsh/custom/plugins/zsh-completions

编辑~/.zshrc

$ vim ~/.zshrc

找到plugins这行，把几个插件加上

plugins=(git zsh-completions zsh-autosuggestions zsh-syntax-highlighting)

之后

$ source ~/.zshrc

有这么多的自带插件，有兴趣可以去研究研究。

oh-my-zsh主题

命令行配色不好看？不喜欢？这里总有一款你喜欢的主题

挑选好之后，编辑~/.zshrc

$ vim ~/.zshrc

找到ZSH_THEME这行，把ys替换成你喜欢的

ZSH_THEME="ys"

之后

$ source ~/.zshrc

git插件

是个zsh自带的插件，是git命令的缩写简化，我相信你一定见过有人使用过它。

git plugin

其他插件

这里也插播一个插件incr，下面是官方介绍图

incr

下载它

$ mkdir ~/.oh-my-zsh/plugins/incr

$ wget -P ~/.oh-my-zsh/plugins/incr http://mimosa-pudica.net/src/incr-0.2.zsh

随后把这句加到~/.zshrc里

source ~/.oh-my-zsh/plugins/incr/incr*.zsh # 加在.zshrc里