react打包后图片丢失_如何快速构建React组件库

俗话说：“麻雀虽小，五脏俱全”，搭建一个组件库，知之非难，行之不易，涉及到的技术方方面面，犹如海面风平浪静，实则暗礁险滩，处处惊险〜

目前团队内已经有较为成熟的 Vue 技术栈的 NutUI 组件库[1]和 React 技术栈的 yep-react 组件库[2]。然而这些组件库大都从零开始搭建，包括 Webpack 的繁杂配置，Markdown 文件转 Vue 文件功能的开发，单元测试功能的开发、按需加载的 Babel 插件开发等等，完成整个组件库项目实属不易，也是一个浩大的工程。如果我们想快速搭建一个组件库，大可不必如此耗费精力，可以借助业内专业的相关库，经过拼装调试，快速实现一个组件库。本篇文章就来给大家介绍一下使用 create-react-app 脚手架、docz 文档生成器、node-sass、结合 Netlify 部署项目的整个开发组件库的流程，本着包教包会，不会没有退费的原则，来一场手摸手式教学，话不多说，让我们进入正题。

首先看一下组件库的最终效果：

本文将从以下步骤介绍如何搭建一个 React 组件库：

构建本地开发环境

开发一个组件库的首要步骤就是调试本地 React 环境，我们直接使用 React 官方脚手架 create-react-app，可以省去从底层配置 Webpack+TypeScript+React 的摧残：

1、使用 create-react-app 初始化脚手架，并且安装 TypeScript

npx create-react-app myapp--typescript

注意使用 node 为较高版本 >10.15.0

2、配置 eslint 进行格式化

由于安装最新的 create-react-app 结合 VScode 编辑器即可支持 eslit，但是需要在项目根目录中要添加 .env 这个配置文件，设置 EXTEND_ESLINT=true 这样才会启用 eslint 检测，注意要重启 vscode

3、组件库系统文件结构

新建 styles 文件夹，包含了基本样式文件，结构如下：

|-styles| |-variables.scss // 各种变量以及可配置设置| |-mixins.scss    // 全局 mixins| |-index.scss    // 引入全部的 scss 文件，向外抛出样式入口|-components| |-Button|   |-button.scss // 组件的单独样式|   |-button.mdx // 组件的文档|   |-button.tsx // 组件的核心代码|   |-button.test.tsx // 组件的单元测试文件| |-index.tsx  // 组件对外入口

4、安装 node-sass 处理器

安装 node-sass 用来编译 SCSS 样式文件：npm i node-sass-D

这样最基本的 react 开发环境就完成了，可以开心的开发组件了。

组件库打包编译

本地调试完组件库之后，需要打包压缩编译代码，供其他用户使用，这里我们用的 TypeScript 编写的代码，所以使用 Typescript 来编译项目：首先在每个组件中新建 index.tsx 文件：

import Button from './button'export default Button

修改 index.tsx 文件，导入导出各个模块

export { default as Button } from './components/Button'

在根目录新建 tsconfig.build.json，对 .tsx 文件进行编译：

{  "compilerOptions": {    "outDir": "dist",// 生成目录    "module": "esnext",// 格式    "target": "es5",// 版本    "declaration": true,// 为每一个 ts 文件生成 .d.ts 文件    "jsx": "react",    "moduleResolution":"Node",// 规定寻找引入文件的路径为 node 标准    "allowSyntheticDefaultImports": true,  },  "include": [// 要编译哪些文件    "src"  ],  "exclude": [// 排除不需要编译的文件    "src/**/*.test.tsx",    "src/**/*.stories.tsx",    "src/setupTests.ts",  ]}

对于样式文件，使用 node-sass 编译 SCSS，抽取所有 SCSS 文件生成 CSS 文件：

"script":{     "build-css": "node-sass ./src/styles/index.scss ./dist/index.css", }

并且修改 build 命令：

"script":{    "clean": "rimraf ./dist",// 跨平台的兼容    "build": "npm run clean && npm run build-ts && npm run build-css",}

这样，执行 npm run build 之后，就可以生成对应的组件 JS 和 CSS 文件，为后面使用者按需加载和部署到 npm 上提供准备。

本地调试组件库

本地完成组件库的开发之后，在发布到 npm 前，需要先在本地调试，避免带着问题上传到 npm 上。这时就需要使用 npm link 出马了。

什么是 npm link？

在本地开发 npm 模块的时候，我们可以使用 npm link 命令，将 npm 模块链接到对应的运行项目中去，方便地对模块进行调试和测试。

使用方法

假设组件库是 reactui 文件夹，要在本地的 demo 项目中使用组件。则在组件库中(要被 link 的地方)执行 npm link，则生成从本机的 node_modules/reactui 到组件库的路径/reactui 中的映射关系。然后在要使用组件库的文件夹 demo 中执行 npm link reactui 则生成以下对应链条：

在要使用组件的文件夹 demo 中 -[映射到]—> 本机的 node_modules/reactui —[映射到]-> 开发组件库 reactui 的文件夹 /reactui

需要修改组件库的 package.json 文件来设置入口：

{  "name": "reactui",  "main": "dist/index.js",  "module": "dist/index.js",  "types": "dist/index.d.ts",}

然后在要使用组件的 demo 项目的依赖中添加：

"dependencies":{  "reactui":"0.0.1"}

注意，此时并不用安装依赖，之所以写上该依赖，是为了方便在项目中使用的时候可以有代码提示功能。然后在 demo 项目中使用：

import { Button } from 'reactui'

在 index.tsx 中引入 CSS 文件

import 'reactui/build/index.css'

正当以为大功告成的时候，下面这个报错犹如一盆冷水从天而降：

经过各种问题排查，在 react 官方网站[3] 上查到以下说法：

react打包后图片丢失_如何快速构建React组件库相关推荐

react打包后图片丢失_使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
react打包后图片丢失_手搭一个 React，Typescript，Koa，GraphQL 环境
本文系原创,转载请附带作者信息:yhlben 项目地址:https://github.com/yhlben/cdfang-spider 前言在实际的开发过程中,从零开始初始化一个项目往往很麻烦,所以 ...
react打包后图片丢失_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
react打包后图片丢失_宜信技术实践｜指尖前端重构（React）技术调研分析
一.为什么选择React React是当前前端应用最广泛的框架.三大SPA框架 Angular.React.Vue比较. Angular出现最早,但其在原理上并没有React创新的性能优化,且自身相对 ...
react打包后图片丢失_React系列四 - React脚手架
一. 认识脚手架 1.1. 前端工程的复杂化如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分: 比如如何管理文件之间的相互依赖: 比如如何管理第三方 ...
react打包后图片丢失_React中型项目的优化实践
本文可能涉及的内容-- 项目介绍整个项目大概有60+个页面,用到的组件大概150+,package里面的依赖大概有70+个,应该勉强算得上是一个中型的React的项目了. 下面给大家看看我们现在bu ...
mathcal 对应于什么库_如何快速构建React组件库
前言俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...
React教程（六）——使用 create-react-app 快速构建 React 开发环境
1.create-react-app是什么? 做一个react项目,构建其开发环境对初学者来说是很困难的!所以,facebook专门出了create-react-app命令,用于react项目开发环境 ...
vite+vue3打包后图片404问题：已解决
let content = [{title:"每周菜单",cont:[{url:"/procurementchildren/meke_menu",name:&q ...

react打包后图片丢失_如何快速构建React组件库

react打包后图片丢失_如何快速构建React组件库相关推荐

最新文章

热门文章