react项目_前端项目搭建部署全流程(一):搭建React项目

c6874012e3cc9dd00941c8845d5719cf.png

1.前言

前段时间突发一个想法,想尝试从零开始搭建一个React项目模板,发布到GitHub,再编写脚手架命令拉取模板以及编写脚本命令快速生成业务模块,然后再用这个模板结合之前的一套组件库,完成编译打包运行一些列操作,完善这个项目模板,再就是另外一个大事,用基于这个项目模板与组件库构建的项目,搭建自动化构建与自动化部署整个流程,将连载文章记录整个这个流程,以便后期回溯。

2.初始化项目

新建项目文件然后执行命令,-y 需要选择的地方默认是yes,执行完后会生成个package.json文件

npm init -y

3.初始化typeScript配置

执行完命令后会生成tsconfig.json文件,文件中会有全属性的配置与描述,在结合自己的需求配置使用

tsconfig.json篇幅太长只留了我的一些配置项

yarn typescript -g
tsc init
{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    "target": "ES2016",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of 
    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

4.配置react

4.1.安装依赖

yarn add react react-dom react-router-dom
yarn add @types/react @types/react-dom @types/react-router-dom --dev

4.2.新建html模板

新建public目录下新建index.html

<!--public/index.html-->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="favicon" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

4.3.新建工程入口文件

新建src目录下新建App.tsxindex.tsx

// App.tsx
import React from 'react';

const App = () => {
  return <div>buildDemo</div>;
};

export default App;

// index.tsx
import App from './App';
import ReactDom from 'react-dom';
import React from 'react';

ReactDom.render(<App />, document.querySelector('#root'));

5.配置webpack

5.1.安装webpack依赖(webpack版本5.x)

yarn add webpack webpack-cli webpack-merge html-webpack-plugin@next clean-webpack-plugin --dev

5.2.依赖包说明

html-webpack-plugin@next wepack 5需要安装5.x版本的htmlplugin官网要求,具体运行处会有说明

clean-webpack-plugin 清楚打包目录的插件

5.3.新建webpack配置

新建config文件存放webpack的配置文件:

  • webpack.config.base.js webpack基本配置
  • webpack.config.dev.js webpack开发环境配置
  • webpack.config.prod.js webpack生产环境配置
// webpack.config.base.js
// 加上type在配置时会有提示
/**
 * @type {import('webpack').Configuration}
 */

module.exports = {
    entry: path.resolve(__dirname, '../src/index.tsx'),
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, '../dist'),
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, '../publich/index.html'),
            favicon: path.resolve(__dirname, '../publich/favicon.ico'),
            hash: true,
        }),
        new CleanWebpackPlugin({
            dry: false,
            cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, 'dist')],
        }),
    ],
};
// webpack.config.dev.js
/**
 * @type {import('webpack').WebpackOptionsNormalized}
 */

const devConfig = {
    mode: 'development',
};

module.exports = webpackMerge.merge(baseConfig, devConfig);
// webpack.config.prod.js
/**
 * @type {import('webpack').Configuration}
 */

const prodConfig = {
    mode: 'production',
};

module.exports = webpackMerge(baseConfig, prodConfig);

6.配置babel

6.1.安装依赖(babel版本7.x)

yarn add babel-loader babel-plugin-import @babel/cli @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript --dev

6.2.依赖包说明

babel-loader 官网解释是文件预处理器,其实就是webpack处理静态文件的时候,需要各种loader来加载文件

babel-plugin-import 可以针对antd,antd-mobile,lodash等库进行按需加载

@babel/cli 内置的CLI命令行工具

@babel/core 需要调用babel的api进行转码,就要使用该模块

@babel/preset-env 是一个灵活的预设,你可以无需管理目标环境需要的语法转换或浏览器polyfill,就可以使用最新的 JavaScript

@babel/preset-react react预设

@babel/preset-typescript typescript预设

6.3.创建babel.config.js文件

// type 编写时会有提示
/**
 * @type {import('@babel/core').TransformOptions}
 */
module.exports = {
    presets: [
        [
            '@babel/env',
            {
                useBuiltIns: 'usage',
                corejs: 3,
            },
        ],
        '@babel/preset-react',
        '@babel/preset-typescript',
    ],
};

webpack.config.base.js中添加module配置

/**
 * @type {import('webpack').Configuration}
 */

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /.(js|ts)x?$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                },
            },
        ],
    },
};

7.配置开发服务器

yarn add webpack-dev-server --dev

webpack.config.dev.js添加如下配置

/**
 * @type {import('webpack-dev-server').Configuration}
 */

const devServer = {
    port: 3000,
    host: 'localhost',
    contentBase: path.join(__dirname, '../publich'),
    watchContentBase: true,
    publicPath: '/',
    compress: true,
    historyApiFallback: true,
    hot: true,
    clientLogLevel: 'error',
    // open: true,
    watchOptions: {
        ignored: /node_modules/,
    },
};

/**
 * @type {import('webpack').WebpackOptionsNormalized}
 */

const devConfig = {
    mode: 'development',
    devServer: devServer,
};

module.exports = webpackMerge.merge(baseConfig, devConfig);

package.json中添加启动命令

"scripts": {
        "start": "webpack serve --config ./config/webpack.config.dev.js"
},

8.启动

8.1.Error: Cannot find module 'webpack-cli/bin/config-yargs'

webpack-dev-server 启动过程中,如果webpack-cli版本是4,则会报该错误

解决方案有两种:

  1. 修改命令"start": "webpack serve --config ./config/webpack.config.dev.js"
  2. 降低webpack-cli的版本到3

再次启动抛出这个问题,排查是因为webpack.config.base.jsresolve中extensions未关联.js,.jsx

43abbe3d711e4c9edb892ab7d1f7ff0e.png

8.2.Error:Uglify SyntaxError: Unexpected token: punc ())

当使用UglifyJs压缩时,出现这个错误,查阅相关资料是ES6语法压缩问题

cc234f44d5792b0011c2ce5588439519.png

解决方案:UglifyJs移到webpack.optimization.minimizer

参考文献:https://stackoverflow.com/questions/42375468/uglify-syntaxerror-unexpected-token-punc

8.3.Error:Failed to decode param '/%PUBLIC_URL%/favicon.ico

出现这个问题的原因是我自己下载的依赖包没有关注版本

解决方案:

  1. 查阅html-webpack-pluginwebpack5要使用这个版本的plugin"html-webpack-plugin": "^5.0.0-alpha.14",
  2. 还一种解决方案就是回退webpack到4然后用InterpolateHtmlPlugin替换/%PUBLIC_URL%/

9.资料文献

https://juejin.cn/post/6844904192658636808

第一次记录写文章,文笔有限,多多包涵,ヾ(´ー`)ノ゛谢谢♪

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
umi 是一个基于 react前端开发框架,它提供了一些方便的工具和规范,帮助我们更快地搭建部署移动端 web 项目。而 antd design 是一个优秀的 UI 组件库,它提供了丰富的组件,能够满足我们在移动端 web 项目中的各种需求。 首先,我们可以使用 umi 来初始化一个移动端的项目。umi 提供了脚手架工具,可以帮助我们快速创建一个基本的项目结构。通过命令行工具,我们可以选择使用 umi 内置的模板和插件,来搭建一个符合我们需求的移动端项目。 接着,我们可以使用 antd design 来构建我们的移动端页面。antd design 提供了丰富的 UI 组件,如导航栏、按钮、表单等等,这些组件都经过了精心设计和优化,可以帮助我们快速构建漂亮而且功能丰富的移动端页面。我们可以通过引入 antd design 的组件库,然后按照官方文档的指引使用这些组件,实现我们的页面功能。 在搭建项目时,umi 提供了一些功能和规范,例如路由配置、状态管理等。我们可以使用 umi 提供的路由功能来管理页面之间的跳转和传参,通过 umi 的状态管理功能可以更好地管理组件的状态和数据。同时,umi 还支持按需加载和自动优化等功能,能够提高项目的加载速度和性能。 总的来说,umi antd design react 搭建移动端 web 项目是一个很便捷和高效的选择。umi 提供了一个规范的开发框架,antd design 提供了丰富的 UI 组件,它们的结合可以帮助我们更快速地构建移动端 web 项目

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值