React 项目配置 & Win10 WSL

简介: React 项目配置 & Win10 WSL

团队新启动一个 React 项目, 有些配置命令是 Linux 指令,同事用的 Mac 电脑,我 git clone 下来之后,发现 npm installnpm start 都有报错,原因是 package-lock.json 配置里面有用到软链接的添加和删除(linux指令),而我的是 win10系统,默认不支持,git bash 兼容性也不好,莫名报错,为了保持开发环境的一致性,决定在自己本地启用 linux 服务,这次使用 WSL(win10 的 linux 子系统) 来实现。


Windows Subsystem for Linux(简称 WSL)是一个为在 Windows 10 上能够原生运行 Linux 二进制可执行文件(ELF格式)的兼容层。它是由微软与 Canonical 公司合作开发,目标是使纯正的 Ubuntu 14.04 "Trusty Tahr" 映像能下载和解压到用户的本地计算机,并且映像内的工具和实用工具能在此子系统上原生运行。

WSL 提供了一个微软开发的 Linux 兼容内核接口(不包含 Linux 代码),来自 Ubuntu 的用户模式二进制文件在其上运行。

该子系统不能运行所有Linux软件,例如那些图形用户界面,以及那些需要未实现的 Linux 内核服务的软件,不过,这可以用在外部 X 服务器上运行的图形 X Window 系统缓解。

此子系统起源于命运多舛的 Astoria 项目,其目的是允许 Android 应用运行在 Windows 10 Mobile上。

此功能组件从 Windows 10 Insider Preview build 14316 开始可用。

——维基百科


一、安装 linux 子系统


开启两个 window 权限


  1. 设置 => 更新与安全 => 针对开发人员 => 开发人员模式


  1. 控制面版 => 程序 => 应用或关闭 Window 功能 => 选中:适用于Linux 的Window 子系统


  1. 重启一下电脑~

安装

直接打开 window 商店,搜索 linux, 下载、安装、启动;这里我下载的是 Ubuntu 版本,也是大家使用最多的一个 WSL 版本。

更换 Ubuntu 版本的镜像源

这个主要是解决 Ubuntu 系统安装软件时速度慢的问题,毕竟默认镜像源是在国外,你懂的

更换源我找的阿里的,中科大的也可以用,都列出来了


// 阿里源
deb http://mirrors.aliyun.com/ubuntu/ trusty main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ trusty-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ trusty-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ trusty-proposed main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ trusty-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-backports main restricted universe multiverse
// 中科大源
deb https://mirrors.ustc.edu.cn/ubuntu/ xenial main restricted universe multiverse
deb https://mirrors.ustc.edu.cn/ubuntu/ xenial-updates main restricted universe multiverse
deb https://mirrors.ustc.edu.cn/ubuntu/ xenial-backports main restricted universe multiverse
deb https://mirrors.ustc.edu.cn/ubuntu/ xenial-security main restricted universe multiverse


更换步骤


1. 备份原来的数据源配置文件
cp /etc/apt/sources.list /etc/apt/sources.list_backup
2. 编辑数据源配置文件,执行如下指令后继续点击回车键,进入vim 编辑模式,修改(此处可以了解下 vim 常用指令)完成后,Esc 键退出,wq! 指令保存(shift + ':'调出)
vi /etc/apt/sources.list
3. 更新配置
apt-get update


二、配置前端开发环境


要知道,这个 linux 系统是一个独立的系统,我们在 window 上安装的软件如 Nodejs 等都需要在 linux 下重新安装才行,下面介绍常用工具的安装方法

Nodejs的安装


1. 使用 curl 命令来下载nodejs 的源码
curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
2. Ubuntu包管理开始安装nodejs
sudo apt-get install -y nodejs(sudo是mac特有的,win下忽略)


n 模块的安装与使用

n 模块是专门用来管理Nodejs 版本的,它的作者同时也是鼎鼎大名的 express 框架的作者,它的特点就是简单,缺点也很明显就是不支持window 系统


npm install -g n // 全局安装
n latest // 安装最近的正式版
n stable // 安装最近的稳定版
n rm 10.15.2 // 删除某个版本
n use 10.15.2 // 使用某个版本


nvm的安装与使用

其实nvm 和 n模块类似,但是我感觉更好用,可以用它在全局安装多个 Nodejs 版本并随意切换,下面是 linux 下的安装方法(window环境有类似的 gnvm):


curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 下载源码
source ~/.bashrc 源码解析安装
nvm --version 有版本信息则说明安装成功
nvm ls 可列出本地所有安装的 Nodejs 版本
nvm ls-remote 可查看所有 Nodejs 版本
nvm install <version>(版本号) 例如:nvm install v10.15.2
nvm alias default v10.15.2 指定默认版本号
nvm -v 查看版本


nrm的安装与使用

nrm 是一个用来管理和快速切换私人 npm 配置的工具,可用来随意的切换 npm 镜像源,比如公司内网镜像,淘宝镜像等,建议全局安装


npm install nrm -g --save 全局安装
nrm ls 查看默认配置,这里会列出所有的镜像
nrm current 查看当前使用的是哪个源
nrm use <源名> 切换到其它源,如 nrm use cnpm
nrm add 命令可添加公司私有 npm 源,如 http://baozun.com(随便写的),起个别名叫 baobao,nrm add baobao http://baozun.com
此时再执行 nrm ls,发现 baobao 已添加成功
nrm test npm 测速
nrm del baobao 删除源配置



好啦,到这里该装的都差不多了,我来试下启动 React 项目:

  1. npm install (安装所需依赖)
  2. npm start (启动ing)

成功啦!!!

好啦,现在项目成功的在 linux 环境下启动,而我的代码编辑工作还是在 window 环境,团队开发环境保持了一致,感觉很棒。

目录
相关文章
|
3月前
|
前端开发
react配置proxy代理的两种方式
本文介绍了在React项目中配置代理的两种方式:通过在package.json中添加代理配置,以及通过创建setupProxy.js文件来实现更复杂的代理规则。
128 2
|
4月前
|
存储 监控 前端开发
|
4月前
|
移动开发 前端开发 安全
React Native环境搭建及配置问题
React Native环境搭建及配置问题
91 2
|
5月前
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
307 1
|
7月前
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
438 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
7月前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
126 2
|
7月前
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
232 0
|
7月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
105 2
|
7月前
|
存储 JSON 前端开发
react保姆级搭建新项目
此文主要以ts+vite+router6+antd 快速搭建一个react项目,适用于初学者,用于学习交流
112 2