内容简介:一般情况下,我们写 React 项目,用 create-react-app 脚手架开发比较方便,但是如果要写一个插件的话,用三方脚手架就显得有点臃肿了,我们可以自己配置一个符合我们开发的简单工具,本文教你如何一步一步开发一个 React 插件 ,let's start :blush:工欲善其事,必先利其器,我们来选型为了方便开发,我们选用 Typescript 作为开发语言,可以即时类型检查,顺便还能装逼(巨硬大法好),
一般情况下,我们写 React 项目,用 create-react-app 脚手架开发比较方便,但是如果要写一个插件的话,用三方脚手架就显得有点臃肿了,我们可以自己配置一个符合我们开发的简单工具,本文教你如何一步一步开发一个 React 插件 ,let's start :blush:
准备工作
工欲善其事,必先利其器,我们来选型
- Typescript
为了方便开发,我们选用 Typescript 作为开发语言,可以即时类型检查,顺便还能装逼(巨硬大法好),
注: Typescript 可选的,你也可以选择 js 刀耕火种,不过最好还是用 Typescript 写吧,毕竟9102年了,骚年 :smile:
- webpack + babel
这里先用我们熟悉的 webpack 作为打包工具(之后会尝试改成 rollup 作为打包工具)
- jest + travis + coveralls
jest 作为我们代码测试的工具,这里选用 travis ,一个在线持续集成的工具(帮助你打包、构建、运行scripts命令、代码测试等) 选用 coveralls 可以根据 travis 代码测试后生成的代码覆盖率生成 badge(Github 好多项目都有的)
目录结构
下面我们来大体组织下目录结构
react-yan-progress ├── build // 打包目录 │ └── YanProgress.min.js ├── src // 源码 │ ├── index.css │ └── index.tsx ├── test // 测试文件 │ └── YanProgress.test.js ├── index.d.ts // 声明文件(ts) ├── jest.config.js // jest 测试配置文件 ├── webpack.config.js // webpack 配置文件 ├── tsconfig.json // ts 配置文件 ├── package.json ├── .travis.yml // travis 配置文件 ├── LICENSE └── README.md 复制代码
开发者选项
所有的依赖的包如下
{ "devDependencies": { "@babel/core": "^7.1.6", "@babel/preset-env": "^7.1.6", "@babel/preset-react": "^7.0.0", // for react "@types/react": "^16.7.18", // 声明文件 "@types/react-dom": "^16.0.11", // 声明文件 "babel-loader": "^8.0.4", "chai": "^4.2.0", // 测试断言库 "coveralls": "^3.0.2", // 代码覆盖率 "css-loader": "^1.0.1", "jest": "^23.6.0", // 测试工具 "react": "^16.7.0", "react-dom": "^16.7.0", "style-loader": "^0.23.1", "ts-loader": "^5.3.2", // 解析 ts "typescript": "^3.2.2", // 解析 ts "webpack": "^4.25.1", "webpack-cli": "^3.1.2" } } 复制代码
命令配置如下,详情 package.json
{ "scripts": { "build": "webpack --config webpack.config.js --progress --colors", "test": "jest ./test/YanProgress.test.js", "coveralls": "cat ./coverage/lcov.info | coveralls" }, } 复制代码
webpack 配置
我们采用 webpack4 ,具体配置请看官网,传送门
const path = require('path'); module.exports = { mode: "production", // 生产模式 entry: { // 入口 "YanProgress": path.resolve(__dirname, './src/index.tsx') }, output: { // 出口 path: path.resolve(__dirname, './build'), filename: '[name].min.js', publicPath: "./build/", libraryTarget: 'commonjs2', // 注意这里按 commonjs2 模块规范打包 }, module: { rules: [ { test: /\.tsx?$/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-env', "@babel/preset-react"] } }, { loader: 'ts-loader', // 解析 ts } ], include: path.resolve(__dirname, "./src/"), // 只解析 src 目录下的文件 }, { test: /\.css$/, loader: "style-loader!css-loader?modules&localIdentName=[hash:8]", // css_modules 配置详情 http://www.ruanyifeng.com/blog/2016/06/css_modules.html include: path.resolve(__dirname, "./src/"), } ] }, resolve: { // 省略文件后缀时,默认按下面的配置取 extensions: ['.ts', '.tsx', '.js'], }, externals: { // 不把 react 打包进去 react: 'react' } }; 复制代码
【选读】Typescript 配置
由于我们要在 ts 文件中 引入 css 模块,但是 ts 不认识,所以我们需要进行如下配置
在项目的根目录下新建一个 index.d.ts
ts 声明文件
declare module '*.css'; 复制代码
开始编写插件
这里就是与平常的开发组件一样,举个例子
// jsx import React from 'react'; class YanProgress extends React.Component{ render() { return ( <div> 骚年,写代码快乐吗,看我干嘛 :smile:,赶快滚去写代码啊,别忘了点个 star :joy: </div> ); } } export default YanProgress; // 记得导出啊,骚年 复制代码
你可以直接看我写好的代码(然后 ctrl+c,ctrl+v),源码在这里, 点我
安装依赖及代码压缩打包
webpack4 默认会压缩代码,so 我们直接执行刚才 package.json 配置好的 scripts 的命令
$ yarn $ yarn run build 复制代码
代码测试
-
单元测试
可以在
test
目录下新建一个xxx.test.js
的测试文件,写好测试用例(这里使用的是 chai 断言库的 expect 风格),执行如下命令$ yarn run test 复制代码
-
包测试
如果你也想以 npm 包的形式引入(
import YanProgress from 'react-yan-progress'
),测试的话,可以执行如下命令在你的项目根目录下,打开终端运行如下命令,建立链接
$ yarn link 复制代码
在你要测试的 demo 项目根目录下,执行如下,然后你就可以这样使用了
import YanProgress from 'react-yan-progress'
$ yarn link react-yan-progress 复制代码
持续集成
这里用到比较方便简单的 travis 在线测试工具,和测试代码覆盖率工具 coveralls,网址如下:
持续集成travis-ci.org
代码覆盖率coveralls.io
注册使用过程就略过了,毕竟已经有很对教程了(面向谷歌编程 :joy:)
在项目根目录下新建一个 .travis.yml
文件,配置如下
language: node_js # 运行环境 node_js: - "10.6.0" # 版本 branches: only: - master # 只有主支可以 before_install: - export TZ='Asia/Shanghai' # 如果你的项目里涉及到时间处理,这里需要设置时区 install: yarn install # 安装 npm 包 script: # 执行命令 - yarn run build # 打包 - yarn run test # 测试 after_success: # 成功之后执行如下命令 - yarn run coveralls # 测试代码覆盖率 复制代码
以上所述就是小编给大家介绍的《手把手教你写一个可以发布到 npm 的 React 插件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 升级到AndroidX?你可以先了解一下这款插件
- 推荐一个很好用的vscode插件:一个可以给出vuex中store定义信息的vscode插件
- 国外大神整理了一份 kubectl 插件列表,大家可以了解一下
- 100人运维200个数据中心,可以吗?华为可以!
- Windows 上的应用程序在运行期间可以给自己改名(可以做 OTA 自我更新)
- c# – 为什么具有受保护修饰符的函数可以被覆盖并且可以在每个位置访问?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。