React脚手架/React.cil

官网链接: create-react-app.dev/docs/gettin…

1node新建单页面项目

npx create-react-app my-app(项目名称)/yarn create react-app my-app

2启动项目

cd my-app
npm start

3相关指令

     yarn/npm start  启动项目
     yarn/npm build  打包项目
     yarn/npm test  测试
     yarn/npm eject   作者把webpack的文件隐藏了。 把webpack的配置文件拷贝一份 暴露出来给我们修改

注意:

 yarn/npm eject命令可能在执行的时候失败报错,这是因为脚手架自带gei工具,检测到我们还有未上传的文件

解决办法:

右键 git bush git add . (工作区到缓存区,注意 . 之前加空格) 

git commit -m 'xxx' (缓存区到本地仓库,xxx为自定义的缓存文件名)

再执行yarn/npm eject,注意这一步是不可逆的,最好不要修改

less/sass配置:(react没有vue-cil人性化的傻瓜一步式配置,所以需要我们手动下载,配置)

1 npm i /yarn add   less -D

   npm i /yarn add less-loader -D ( -D --save-dev,开发模式,以前如果不写就不会保存在package.json文件中，现在不写 默认-S,现在默认为 -S --save生产模式)

2 配置 webpack.config.js(只有执行了yarn/npm eject命令才会有这个文件)

01搜索sass 

02把 const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\\.module\\.(scss|sass)$/; 

03换成 const sassRegex = /\.(css|less)$/; const sassModuleRegex = /\\.module\\.(css|less)$/; 

把sass-loader 有两处 变成 less-loader