Научит вас, как написать плагин React, который можно опубликовать в npm.

React.js
Научит вас, как написать плагин React, который можно опубликовать в npm.

предисловие

В общем, когда мы пишем проекты React, для разработки удобнее использовать скаффолдинг create-react-app, но если мы хотим написать плагин, то использовать 3-сторонний скаффолдинг немного раздуто. простой инструмент, который подходит для нашей разработки.Этот Wen учит вас, как разработать шаг за шагом Плагин React, приступим 😊

Готов к работе

Если рабочий хочет сделать работу хорошо, он должен сначала наточить свой инструмент, давайте выберем тип

  • Typescript

В целях облегчения разработки мы выбираем в качестве языка разработки Typescript, который может проверять тип в реальном времени, и, кстати, мы также можем притворяться принудительными.

Примечание: Typescript необязателен, можно и js выбрать для slash and burn, но лучше писать на Typescript, все-таки 9102, год Сао 😄

  • webpack + babel

Здесь мы сначала используем знакомый веб-пакет в качестве инструмента для упаковки (позже мы попытаемся перейти на накопительный пакет в качестве инструмента для упаковки).

  • jest + travis + coveralls

jest В качестве нашего инструмента для тестирования кода здесь мы выбираем travis, онлайн-инструмент непрерывной интеграции (помогающий вам упаковывать, создавать, запускать команды скриптов, тестировать код и т. д.) Используйте комбинезоны для создания значков на основе покрытия кода, полученного после тестирования кода travis (они есть во многих проектах Github).

Build Status

Структура каталогов

Теперь давайте примерно организуем структуру каталогов

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"
    },
}

конфигурация веб-пакета

Мы используем 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: 'umd', // 打包方式
		library: 'YanProgress', // 导出变量
		libraryExport: 'default', // 默认导出
	},
	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'
	}
};

[Необязательно] Конфигурация машинописного текста

Так как мы хотим внедрить модуль css в ts файл, но ts его не знает, нам нужно настроить следующее

Создайте новый в корневом каталоге проектаindex.d.tsфайл декларации ts

declare module '*.css';

Начать писать плагины

Здесь то же самое, что и обычные компоненты разработки, например

// jsx
import React from 'react';

class YanProgress extends React.Component{
	render() {
		return (
			<div>
				骚年，写代码快乐吗，看我干嘛 😄，赶快滚去写代码啊，别忘了点个 star 😂
			</div>
		);
	}
}

export default YanProgress; // 记得导出啊，骚年

Вы можете непосредственно посмотреть код, который я написал (затем ctrl+c, ctrl+v), исходный код здесь,нажми на меня

Зависимости установки, сжатие и упаковка кода

webpack4 будет сжимать код по умолчанию, поэтому мы прямо сейчас выполняем команду скрипта, настроенную в package.json.

$ yarn
$ yarn run build

проверка кода

  • модульный тест
    допустимыйtestСоздайте новый в каталогеxxx.test.jsтестовый файл, напишите тестовые примеры (здесь используется ожидаемый стиль библиотеки утверждений chai) и выполните следующие команды.

    $ yarn run test

  • пакетный тест
    Если вы также хотите импортировать как пакет npm (import YanProgress from 'react-yan-progress'), чтобы проверить, вы можете выполнить следующую команду

    В корневом каталоге вашего проекта откройте терминал и выполните следующую команду, чтобы установить ссылку

    $ yarn link

    В корневом каталоге демонстрационного проекта, который вы хотите протестировать, выполните следующее, а затем вы можете использовать его следующим образом.import YanProgress from 'react-yan-progress'

    $ yarn link react-yan-progress

Непрерывная интеграция

Здесь используется более удобный и простой инструмент онлайн-тестирования travis и комбинезоны инструмента покрытия кода тестами, URL-адрес выглядит следующим образом:
Непрерывная интеграцияtravis-ci.org
покрытие кодаcoveralls.io

Процесс регистрации пропускается, ведь тут уже много туториалов (для гугл программирования 😂)

Создайте новый в корневом каталоге проекта.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

Зарегистрируйте учетную запись npm, процесс регистрации опущен

Прежде чем обращать внимание, зайдите на официальный сайт npm, чтобы узнать, не было ли упреждающе занято имя вашего пакета.

Выполните следующую команду для публикации

$ npm publish

пакет обновлений
Выполните следующую команду (x.x.x -> major.minor.patch)

$ npm version patch

взносы с открытым исходным кодом

Примите открытый исходный код, чтобы развитие сообщества и даже отрасли могло быть более мотивированным.

Примечание. Например, ваша звезда — это самое большое поощрение для меня и мотивация поддержать меня в продолжении работы с открытым исходным кодом.

  • Сообщество React-компонентовawesome-react-components
  • другие сообщества, вы можете перейти вGithubпроводить исследования

Закончи цветок 🎉

👏 Приглашаю всех заниматься дзи со мной (Github) 😊

Категории