脚本宝典收集整理的这篇文章主要介绍了react工程搭建系列之---基于create-react-app创建初始项目,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一、使用create-react-app创建可执行的初始项目
1.npx创建(npm版本5.2+)
npx create-react-app my-react-app
2.npm创建(npm版本6+)
npm inIT react-app my-react-app
3.yarn创建
yarn create react-app my-react-app
二、工程结构
my-react-app/
node_modules/
package.json
public/
index.htML 页面模板
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js 入口文件
LOGo.svg
- 其中public/index.html和src/index.js必须存在;
- 只有在Public目录下的文件才能被public/index.html使用;
- 只有在src目录下的文件才会被webpack打包,所以要把js、css文件放在src目录下
三、可执行命令
/* package.JSON */
"scripts": {
"start": "react-scripts start", 开发环境运行,默认监听3000端口
"build": "react-scripts build", 生产环境运行,进行项目打包,默认打包到build目录
"test": "react-scripts test",
"eject": "react-scripts eject"
},
npm run eject
如果create-react-app中的webpack配置满足不了需求,可以运行这个命令将所有webpack配置以及服务移到项目目录中,这样修改起来就很灵活了,但是这个命令是不可回退的,以下运行后的目录结构:
my-react-app/
config/
jest/
cssTransform.js
fileTransform.js
env.js
paths.js
webpack.config.dev.js
webpack.config.PRod.js
webpacKDEvServer.config.js
scripts/
build.js
start.js
test.js
node_modules/
package.json
public/
index.html 页面模板
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js 入口文件
logo.svg
/* package.json */
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
项目地址:https://github.com/SuRuiGit/m...
以上是脚本宝典为你收集整理的react工程搭建系列之---基于create-react-app创建初始项目全部内容,希望文章能够帮你解决react工程搭建系列之---基于create-react-app创建初始项目所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。