[英]create-react-app is too slow and creates messy apps
I am learning react and not exprienced too much.我正在学习反应并且没有太多经验。 Whenever I want to create a new react project, the create-react-app
command takes a lot of time making one.每当我想创建一个新的 react 项目时, create-react-app
命令都会花费大量时间来创建一个。 I have followed CodeSandbox which creates react apps really fast and they are simple and clean unlike ones made by create-react-app, which are too complicated and messy.我关注了CodeSandbox ,它非常快速地创建了 react 应用程序,它们简单而干净,不像 create-react-app 制作的那些过于复杂和混乱。 Is there a boilerplate to help me creating simple react apps quickly?是否有样板可以帮助我快速创建简单的反应应用程序?
This is the easiest way to get started这是最简单的入门方法
npx create-react-app my-app
cd my-app
npm start
Below is an alternative, but it's a lot more involved.下面是一个替代方案,但涉及更多。
mkdir my-app // create directory
cd my-app
npm init -y //create package.json
npm install react react-dom //install react and react-dom
touch index.js index.css
You can add your code to index.js.您可以将代码添加到 index.js。 It will looks something like this它看起来像这样
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component{
render(){
return(
<div>Hello World</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
After that you'll need to get your babel之后你需要得到你的通天塔
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
touch webpack.config.js
Configure your webpack配置您的 webpack
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : './my-app/index.js',
output : {
path : path.resolve(__dirname , 'dist'),
filename: 'index_bundle.js'
},
module : {
rules : [
{test : /\.(js)$/, use:'babel-loader'},
{test : /\.css$/, use:['style-loader', 'css-loader']}
]
},
mode:'development',
plugins : [
new HtmlWebpackPlugin ({
template : 'my-app/index.html'
})
]
}
Add babel presets and npm command to build (build) and run (dev) your code to package.json添加 babel 预设和 npm 命令以构建(构建)和运行(开发)您的代码到 package.json
"main": "index.js",
"babel":{
"presets" : [
"@babel/preset-env",
"@babel/preset-react"
]
}"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --open"
}
The best and most effiecient way is to first install pnpm
package.最好和最有效的方法是首先安装pnpm
package。 It's much faster than normal npm install
or npm i
command due to symlinks and cache implemented in it.由于其中实现了符号链接和缓存,它比普通的npm install
或npm i
命令快得多。
It's better to have a git repository which is initiated by create-react-app
, you can install the packages you commonly use in the package.json
file.最好有一个由create-react-app
启动的 git 存储库,您可以在package.json
文件中安装您常用的软件包。 Then each time you want to create a new project, you can clone the repository and install the packages fast by running the following command.然后每次你想创建一个新项目时,你可以通过运行以下命令克隆存储库并快速安装包。 It may takes the same time as before, because pnpm
needs to cache the packages and re-use them.这可能需要与以前相同的时间,因为pnpm
需要缓存包并重新使用它们。
pnpm i
I have created a sample repository, you can clone it from this link .我创建了一个示例存储库,您可以从此链接克隆它。
PS 1 :You can read more about pnpm
, in this link . PS 1 :您可以在此链接中阅读有关pnpm
的更多信息。
Use利用
npm init vite@latest npm init vite@latest
Or或者
Yarn create vite@latest纱线创建 vite@latest
It will ask you a question and you have to answer it and it creates and run react apps tooo faster than the original cli它会问你一个问题,你必须回答它,它创建和运行反应应用程序的速度比原来的 cli 快
In my opinion use yarn
instead npm
.在我看来,使用yarn
代替npm
。 I heard it is faster:我听说它更快:
npm install --global yarn
Then for making a directory for your projects:然后为您的项目创建目录:
yarn create react-app my-app
For checking version:检查版本:
yarn --version
One way I do this fast is by running npx create-react-app boilerplate
and then save that directory and push it to github.我快速做到这一点的一种方法是运行npx create-react-app boilerplate
,然后保存该目录并将其推送到 github。
then you can just get your new react app by simply cloning that repo.然后你可以通过简单地克隆那个 repo 来获得你的新反应应用程序。 by running git clone boilerplate
and then you can just rename the folder, and the name of the app and other information you need in package.json.通过运行git clone boilerplate
,然后您可以重命名文件夹,以及 package.json 中所需的应用程序名称和其他信息。 I really only edit the name and the source repo in the package.json
我真的只编辑package.json
中的名称和源代码库
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.