create-react-app等工具将新建一个完整的React项目所需的步骤抽象了出来,让开发者能够将工作重点放在开发项目上,而不用大费精力去关注新建项目的细节。作为React的初学者,了解React项目是如何工作的,如何集成Typescript、Yarn 2和Webpack,有助于更好地理解React架构。
本文将介绍在不使用create-react-app的情况下如何一步步地新建一个包管理工具为Yarn 2(berry)、构建工具为Webpack、使用Typescript编写的React项目。
1. 新建项目目录,并初始化项目
# 新建目录
mkdir create-react-app-from-scratch
cd ./create-react-app-from-scratch
# 初始化,根据提示输入信息
yarn init
# yarn版本默认为1,需要手动设置为2
yarn set version berry
这样一个基于yarn2的项目就新建好了,yarn2默认开启了zero-installs特性,不包含node_modules文件夹,但是想用上yarn2的一些其他特性,还需要费上不少功夫。
2. 安装相关包
-
安装babel,webpack
# babel, webpack相关依赖 yarn add @babel/core @babel/preset-react webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader css-loader style-loader --dev
-
安装typescript,并配置yarn
yarn add typescript ts-loader --dev # yarn的typescript插件,安装包时会自动安装@types/...包 yarn plugin import typescript # 因为没有node_modules目录,pnpify能将关于node_modules的调用转到PnP yarn add @yarnpkg/pnpify --dev # vscode支持 yarn pnpify --sdk vscode
-
安装react
yarn add react react-dom
yarn2的zero-installs特性: 安装完上述包后可以发现项目路径下并没有node_modules目录,如果将项目上传到远程仓库,然后克隆到本地,不需要运行yarn install安装依赖就可以直接运行。
yarn的typescript插件: 在package.json
中可以看见,yarn自动安装了@types/react
, @types/react-dom
依赖。
3. 创建入口文件
-
项目html入口,
public/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Music</title> </head> <body> <div id="root"></div> <noscript> You need to enable JavaScript to run this app. </noscript> </body> </html>
-
React入口,
src/index.tsx
import * as React from 'react'; import * as ReactDOM from 'react-dom'; const App = () => { return ( <div> <h1>Create React App From Scratch</h1> <p> Create webpack-typescript-yarn-berry-based react app from scratch. </p> </div> ) } ReactDOM.render(<App />, document.getElementById('root'));
4. 配置Webpack
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html'
})
module.exports = {
entry: './src/index.tsx',
mode: 'development',
devServer: {
contentBase: path.resolve(__dirname, '.public'),
hot: true
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /(.yarn)/,
use: [
{loader: 'ts-loader'}
]
}
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
plugins: [htmlPlugin]
};
5. 配置Babel
.babelrc
{
"presets": ["@babel/preset-react"]
}
6. 配置Typescript
配置tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"module": "CommonJS",
"lib": ["dom", "ESNext"],
"target": "es2020",
"jsx": "react",
"allowJs": true
},
"include": ["./src/**/*"],
"exclude": [".yarn/**/*", "dist/**/*"]
}
在4. 配置Webpack已配置过ts-loader。
7. 配置package.json
添加运行和打包命令
{
"scripts": {
"start": "webpack serve",
"build": "webpack build"
}
}
8. 运行!!!
-
运行
yarn start
,打开浏览器进入127.0.0.1:8080大功告成,可以看出项目已经成功运行了!
-
运行
yarn build
,项目成功打包在dist
目录下,打开index.html显示与上图相同。
至此已经成功一步一步地搭建了基于Typescript、Yarn 2和Webpack的项目!
麻雀虽小,五脏俱全。
9. 后话
当前的webpack配置只支持对ts文件的解析,如果还需css、scss等文件的解析,需要在webpack.config.js
中配置对应的loader。项目中其他配置文件也需要随着项目的需求逐个完善。
最后如果项目要上传github的话,可以按照如下配置。
.gitignore
/.yarn/*
!/.yarn/releases
!/.yarn/plugins
!/.yarn/sdks
# Swap the comments on the following lines if you don't wish to use zero-installs
# Documentation here: https://yarnpkg.com/features/zero-installs
!/.yarn/cache
#/.pnp.*
# dist
/dist
.gitattributes
/.yarn/** linguist-vendored