React 项目配置 Win10 WSL
联系我:最新首发文章合集
前言
团队新启动一个 React 项目, 有些配置命令是 Linux
指令,同事用的 Mac 电脑,我 git clone
下来之后,发现 npm install
和 npm 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 权限
- 设置 => 更新与安全 => 针对开发人员 => 开发人员模式
- 控制面版 => 程序 => 应用或关闭 Window 功能 => 选中:适用于Linux 的Window 子系统
- 重启一下电脑~
安装
直接打开 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_backup2. 编辑数据源配置文件,执行如下指令后继续点击回车键,进入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.2nvm alias default v10.15.2 指定默认版本号nvm -v 查看版本
nrm的安装与使用
nrm 是一个用来管理和快速切换私人 npm 配置的工具,可用来随意的切换 npm 镜像源,比如公司内网镜像,淘宝镜像等,建议全局安装
npm install nrm -g --save 全局安装nrm ls 查看默认配置,这里会列出所有的镜像nrm current 查看当前使用的是哪个源nrm use <源名> 切换到其它源,如 nrm use cnpmnrm add 命令可添加公司私有 npm 源,如 http://baozun.com(随便写的),起个别名叫 baobao,nrm add baobao http://baozun.com
此时再执行 nrm ls,发现 baobao 已添加成功nrm test npm 测速nrm del baobao 删除源配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vJN0mQ9R-1659962017867)(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/27/169bed64bfa36649~tplv-t2oaga2asx-image.image)]
好啦,到这里该装的都差不多了,我来试下启动 React 项目:
- npm install (安装所需依赖)
- npm start (启动ing)
成功啦!!!
好啦,现在项目成功的在 linux
环境下启动,而我的代码编辑工作还是在 window
环境,团队开发环境保持了一致,感觉很棒。
问题记录
第一次启动时候软链接没有生效,需要手动 cd 到软链接文件,才触发生效,具体原因还不太清除。
参考链接:
- Windows10内置Linux子系统初体验
- win10下的神器Ubuntu子系统
- 用nrm一键切换npm源
- 使用nvm利器,管理node版本
React 项目配置 Win10 WSL相关推荐
- React项目配置axios和反向代理和process.env环境配置等
React项目配置axios和代理和proces.env环境配置等 React项目配置axios和代理和proces.env环境配置等 配置axios和代理 proces.env环境配置 React项 ...
- 记录一次react项目配置过程
1.为什么要配置react而不是脚手架 因为要知其然,最好还要知其所以然! 2.配置对象 webpack webpack-dev-server babel eslint 3.配置过程 1.webpac ...
- Windows安装WSL开发react项目
目录 简介 安装wsl 连接git 配置react项目 用vscode开发wsl项目 总结 简介 最近需要做一个react项目的开发,在window上面安装很多次,最后yarn start失败,于是查 ...
- 配置React项目的运行环境
两种配置react项目运行环境的方法 第一种方法,一步步配置项目的运行环境: 1)下载node,在官方网站可以下载,安装步骤不难,差不多一步步意 点next就行: 2)运行cmd 输入node -v ...
- 在react项目中配置alias-[webpack配置]
alias是webpack中用来配置路径别名的,在路径嵌套特别深的项目中,对于路径的导入非常友好. webpack中的alias create-react-app搭建的react项目中配置alias ...
- React Native项目配置路由和选项卡导航__React Navigation的使用
React Native 配置路由 在网上看了很多例子跟着写,发现都不行,发现之前的写法都已经弃用了,跟着官方一步步来吧. 参考官方文档:React Navigation 先创建好项目: npx re ...
- 了解CSS in JS(JSS)以及在React项目中配置并使用JSS
目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...
- React项目搭建及环境配置
React 脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布了一个无需配置的.用于快速构建开发环境的脚手架工具 create-react ...
- 【React进阶-1】从0搭建一个完整的React项目(入门篇)
这篇文章带领大家从零开始手动撸一个React项目的基础框架,集成React全家桶.万字长文,请各位有足够的时间时再来阅读和学习. 概述 平时工作中一直在用React提供的脚手架工具搭建React项目, ...
最新文章
- CentOS7下vsftp配置
- 手握6亿把钥匙 能否打开“智能家居”的大门?
- 写在树莓派专栏的开篇
- 【学习心得】当程序员思路被打断
- 腾讯2020校园招聘---假期
- Smarty的入门使用
- nginx虚拟域名配置
- Python编程语言介绍
- 使用JavaScript调用手机平台上的原生API 1
- java项目关联关系_Mybatis一对多关联关系映射实现过程解析
- VTD软件说明书阅读之OpenDRIVE Scenario Editor
- 云宏大讲坛 | 灵活轻便的云宏CNware虚拟防火墙
- 易语言获取html源码,易语言获取网页源码的方法
- 世链投研|链游操作指南之MIR4
- ccproxy如何设置
- poi excel密码加密
- 世界杂志排行TOP(1-100)
- “橄榄型”人口结构制约消费增长
- 子域名收集 -- Esd
- 对于按字寻址和按字节寻址的理解
热门文章
- Lawnmower(codeforces115B)
- CSS grid 网格布局
- c语言中如何用sqar函数,简易函数信号发生器设计_毕业论文.doc
- 计算机系优秀团支部申报表,2016-2017学年优秀团支部评选活动圆满结束
- 不会搭建Android知识框架,活该你成不了技术大牛!
- rabbitmq默认guest无法登录的问题解决
- Android系统10 RK3399 init进程启动(十五) 配置新产品
- Matlab中左除(\)与右除(/)的区别
- 【Hack The Box】linux练习-- Doctor
- 求解TSP问题神器——elkai(简单好用)