热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

搭建react+typescript+antdesign开发环境

9102年了,前端工程化发展在nodejs的基础上已经发展的非常完善了,各种前端构建工具层出不穷。ES6编译器babel,css辅助工具postcssscssless,代码风格检测工具eslintprettierstylelint,git辅助工具huskylint-stagedcommitizencommitlint,打包工具webpackgulpgrunt,测试工具jestmocha等等。这么多

9102 年了,前端工程化发展在 nodejs 的基础上已经发展的非常完善了,各种前端构建 工具 层出不穷。ES6 编译器 babel,css 辅助工具 postcss/scss/less,代码风格检测工具 eslint/prettier/stylelint,git 辅助工具 husky/lint-staged/commitizen/commitlint/,打包工具 webpack/gulp/grunt,测试工具 jest/mocha 等等。这么多构建工具每次写项目都去配置一遍那也太浪费时间了,自己维护一套模板有得时不时去更新。比较方便的配置开发环境还是使用 cli 或者一些热门的 bolierplate。本篇文章将以 react 官方维护的 cli 工具 create-react-app (简称 cra)为基础,以不 eject 的方式去配置 ant design,以及一些 cra 并没有内置的辅助工具。

初始化项目并添加 typescript 支持

Typescript 在近两年以惊人的速度被越来越多的开发者和开源项目所采用,我在使用 typescript 开发了一个项目之后也被 typescript 圈粉了。使用 typescript 开发带来的智能提示可以很大程度上杜绝手贱的发生,大多数情况我们都不需要查文档了,以及 typescript 中的一些 Javascript 中没有的语法特性如枚举,使得项目组织可以非常的优雅。从 angular2 默认使用 typescript 开发,到如今 vue3 使用 typescript 重写也能看出 typescript 在前端界的地位将越来越重要。9102,除非是非常小的项目,否则上 typescript 绝对是明智之举。

我的开发环境:

node: 10.15.3 LTS
yarn: 1.15.2
editor: visual studio code

cra 内置了 typescript 支持,只需要在初始化项目时指定 --typescript 参数即可。

npx create-react-app my-app --typescript

# or

yarn create react-app my-app --typescript

如果 cra 项目已经存在,先安装以下 ts types 依赖:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

然后将 .js 结尾的文件重命名为 .tsx 即可。

更多关于在 cra 中使用 ts 的信息查看官方文档:Adding TypeScript

配置 ant design

安装 ant design 依赖

现在从 yarn 或 npm 安装并引入 antd。

$ yarn add antd

配置 ant design css 按需加载

配置 css 按需加载的方式有很多,归根到底就是修改 cra 的 webpack 配置。可以采用暴露 cra webpack 配置的方式,使用 yarn eject 命令即可在项目根目录下暴露出项目的 webpack 配置,配置保存在 config 文件夹下面。我记得 cra 早期版本 eject 之后暴露的配置是拆分成两份 webpack.config.dev.jswebpack.config.prod.js 。最新的 cra 配置被合并到一个配置文件里面了,就一个配置文件,通过一个计算出的环境(development/producation)来动态生成 webpack 配置,这种方式我觉得配置起来更麻烦了,而且eject 是不可逆的,采用 eject 来修改 webpack 配置需要慎重考虑。这种方式的好处就是 webpack 配置你可以直接修改,所以基本上没什么配置不能通过这种方式来加载。

这里我采用社区的 cra 配置解决方案: react-app-rewired 。

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系,你还需要安装 customize-cra 。

$ yarn add react-app-rewired customize-cra
/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
	"eject": "react-scripts eject"
}

在项目根目录新建 config 文件夹,并在 package.json 中添加配置:

"config-overrides-path": "config/config-overrides.js"

然后再在其中创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

使用 babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理),现在我们尝试安装它并修改 config-overrides.js 文件。

$ yarn add babel-plugin-import
+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

按下面的格式引入 ant design 组件。

// src/App.js
  import React, { Component } from 'react';
- import Button from 'antd/lib/button';
+ import { Button } from 'antd';
  import './App.css';

  class App extends Component {
    render() {
      return (
        
); } } export default App;

最后重启 yarn start 访问页面,antd 组件的 js 和 css 代码都会按需加载,你在控制台也不会看到这样的警告信息。关于按需加载的原理和其他方式可以阅读这里。

自定义主题

按照配置主题 的要求,自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式,同时修改 config-overrides.js 文件如下。

$ yarn add less less-loader
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   JavascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

这里利用了 less-loader 的 modifyVars 来进行主题配置, 变量和其他配置方式可以参考配置主题 文档。

修改后重启 yarn start

添加sass 支持

react-scripts@2.0.0 内置了 sass 支持,我们只需要安装 node-sass 依赖即可。

$ npm install node-sass --save
$ # or
$ yarn add node-sass

然后就可以把项目模板中的 css 文件后缀改成 .scss 了。注意是 .scss 不是 .sass 哦, .sass 是 yml 的写法。

添加editorconfig

editorconfig 帮助我们约束多个开发者在同一个项目中代码风格,更重要的是它是跨编辑器,IDE 的。

在 vscode 中使用时可以安装 EditorConfig for VS Code 插件,然后 ctrl + shift + p 调出命令面板,输入 editorconfig 就可以看到 Generator .editorconfig 命令,选择命令后根目录就会生成初始的 .editorconfig 文件。

添加 nvmrc

在项目根目录创建文件 .nvmrc ,再将 node -v 的结果复制进去就可以了。或者直接在项目根目录执行下面的命令。

$ node -v > .nvmrc

添加 .gitignore

cra 默认已经帮我们添加了 .gitignore ,我们可以再添加一些比如 src/assets/videos/* 。使用 vscode 的插件gitignore 我们可以很方便的追加其它要忽略的文件,比如可以选择再添加 VisualStudioCodeWindows 的忽略文件。

配置 linters

ESLint

ESLint 可以约束团队成员的代码风格,并且找出一些容易产生问题的代码。vscode 中安装 ESLint 后可以在 PROBLEMS 面板中看到 ESLint 提示的各种错误。ESLint 自带的 autoFix 也挺好用的,不过我一般会直接让 prettier 去在提交代码时格式化一遍。

cra 默认集成了 ESLint,要让编辑器正确提示 ESLint 错误,需要在项目根目录添加 .eslintrc.json 。内容如下:

{
  "extends": "react-app"
}

为了让 vscode 的 eslint 插件启用 typescript 支持,需要添加下面的配置到 .vscode/settings.json 中。

{
  "eslint.validate": [
    "Javascript",
    "Javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ]
}

集成prettier

Prettier is an opinionated code formatter

opinionated 有武断,自以为是的意思,这里应该理解为 prettier 提供的配置很少,有点强制约定代码风格的意思。

使用 prettier 来格式化我们的代码建议在 git commit 时自动触发就好了,要给 git 设置钩子,我们可以使用 husky 工具。

npm install --save husky lint-staged prettier

lint-staged 是一个提高 lint 工具速度的工具,他的作用就和它的名字一样,lint-staged 可以让 lint 工具只 lint 保存在 stage 区的代码,从而加快 lint 速度。

接着配置 husky 和 lint-staged。在 package.json 中加入下面内容。

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --single-quote --write",
      "git add"
    ]
  },

如果还需要配置 prettier,在项目根目录添加配置文件 .prettierrc.js。内容如下:

// prettier.config.js or .prettierrc.js
module.exports = {
    trailingComma: "es5",
    tabWidth: 4,
    semi: false,
    singleQuote: true
};

集成stylelint

stylelint 我主要参考了 ant design 的配置。

yarn add -D stylelint

在根目录添加 stylelint 配置文件 .stylelintrc.json 或者 package 添加字段 "stylelint",内容如下:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-rational-order",
    "stylelint-config-prettier"
  ],
  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
  "rules": {
    "comment-empty-line-before": null,
    "function-name-case": ["lower"],
    "no-invalid-double-slash-comments": null,
    "no-descending-specificity": null,
    "declaration-empty-line-before": null
  },
    "ignoreFiles": []
}

安装上面配置中使用的插件。

yarn add -D stylelint-config-standard stylelint-config-rational-order stylelint-config-prettier stylelint-order stylelint-declaration-block-no-ignored-properties

修改 lint-staged 配置为:

"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --single-quote --write",
      "git add"
    ],
    "src/**/*.css": "stylelint",
    "src/**/*.scss": "stylelint --syntax=scss"
},

配置 commitlint

安装校验工具 @commitlint/cli。

yarn add - D@commitlint/cli

安装符合Angular风格的校验规则。

yarn add -D @commitlint/config-conventional 

package.json 添加 "commitlint" 字段并设置:

"commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
}

package.json 中 husky 配置修改为:

"husky": {
        "hooks": {
            "pre-commit": "lint-staged",
            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
        }
},

最后

添加一些常用的文件夹。我一般默认添加 components,pages,stores,utils,styles 这几个文件夹。做到这里,我们的项目的开发环境算是配置好了,接下来你应该修改 cra 生成的模板项目的网站图标和全局样式等,然后进行业务开发。

我有个完全按照上面的步骤配置好的项目: mini-shop ,需要的可以查看我第二次提交时的代码,因为 cra 默认帮我们提交了一次,我配置完开发环境再提交就是第二次了。

参考资料:

  1. create-react-app 官方文档
  2. Cz工具集使用介绍 - 规范Git提交说明

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 我们


推荐阅读
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • 本文详细介绍了PHP中的几种超全局变量,包括$GLOBAL、$_SERVER、$_POST、$_GET等,并探讨了AJAX的工作原理及其优缺点。通过具体示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • ABP框架是ASP.NET Boilerplate的简称,它不仅是一个开源且文档丰富的应用程序框架,还提供了一套基于领域驱动设计(DDD)的最佳实践架构模型。本文将详细介绍ABP框架的特点、项目结构及其在Web API优先架构中的应用。 ... [详细]
  • 本文探讨了 TypeScript 中泛型的重要性和应用场景,通过多个实例详细解析了泛型如何提升代码的复用性和类型安全性。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ... [详细]
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • Node.js 配置文件管理方法详解与最佳实践
    本文详细介绍了 Node.js 中配置文件管理的方法与最佳实践,涵盖常见的配置文件格式及其优缺点,并提供了多种实用技巧和示例代码,帮助开发者高效地管理和维护项目配置,具有较高的参考价值。 ... [详细]
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • 功能需求:fxFlex 指定目标父元素 ... [详细]
  • 2017-09-07前端日报精选JavaScriptEventLoop机制详解与Vue.js中实践应用Redux基础与实践如何用js获取虚拟键盘高度?( ... [详细]
  • 本文由公众号【数智物语】(ID: decision_engine)发布,关注获取更多干货。文章探讨了从数据收集到清洗、建模及可视化的全过程,介绍了41款实用工具,旨在帮助数据科学家和分析师提升工作效率。 ... [详细]
  • 页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面,建议采用SSR(服务器端渲染),如Nuxt等框架。更多优化策略可参见:https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]
  • egg实现登录鉴权(七):权限管理
    权限管理包含三部分:访问页面的权限,操作功能的权限和获取数据权限。页面权限:登录用户所属角色的可访问页面的权限功能权限:登录用户所属角色的可访问页面的操作权限数据权限:登录用户所属 ... [详细]
  • JavaScript最初并非设计为纯粹的面向对象编程(OOP)语言,因为直到ES5标准中仍未引入类的概念。然而,随着ES6的发布,JavaScript正式引入了类的语法,使得开发者能够更加直观地实现继承机制。本文将深入探讨JavaScript中多样的继承实现方法,包括原型链、寄生组合式继承等技术,并分析它们的优缺点及适用场景。 ... [详细]
author-avatar
tt
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有