Объясните выпуск компонентов реакции от 0 до npm

React.js NPM

Я публикую свой первый компонент npm,Облако 3D-тегов на основе реакциикомпоненты.在这途中我也是遇到了很多的坑，花在完善整个发布流程的时间远多于写这个组件本身的时间，所以我记录下我觉得一个正常的 react 组件的发布流程

В конце концов, мне потребовалось больше времени, чтобы задокументировать этот пост, чем мне потребовалось, чтобы завершить весь компонент, надеюсь, это поможет новичкам в конце.

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

  1. компоненты разработки
  2. Написать Readme
  3. Нажмите на github и поместите демо на страницу github.
  4. Публикация компонентов в npm

компоненты разработки

Создайте папку проекта и инициализируйтеnpm package, убедитесь, что имя создаваемого вами компонента не находится вnpmбыл использован выше, здесь мы используем реактивную демонстрацию в качестве примера

mkdir react-demo
cd react-demo
npm init

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

Сначала установите пакеты, связанные с реакцией:

npm i react react-dom -D

использоватьbabelСкомпилируйте связанные зависимости:

npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react -D

использоватьwebpackстроить,webpack-dev-serverВ качестве локального сервера разработки вам необходимо установить следующие зависимости:

npm i webpack webpack-cli webpack-dev-server -D

Для простой демонстрации я устанавливаю babel-loader только для компиляции jsx, а другие загрузчики должны быть установлены сами по себе.

npm i babel-loader -D

Кроме того, установите еще один плагин веб-пакета html-webpack-plugin для генерации html:

npm i html-webpack-plugin -D

Затем добавьте обычнуюstartа такжеbuildсценарий,package.jsonследующим образом:

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {}
}

Конечно, вы также можете напрямую скопировать мой package.json, а затемnpm installЗависимая установка также может быть выполнена один за другим.

Один из самых основных компонентов нужен только для компиляции jsx, поэтому мне не нужно устанавливать css и разбираться с другими загрузчиками.В центре внимания этой статьи не вебпак, так что другие можно решить сами.Если у вас есть вебпак проблемы, вы можете приватно пообщаться со мной.

Затем мы создаем следующую структуру каталогов:

├── example // 示例代码，在自己测试的时候可以把测试文件放到 src 里
│   └── src // 示例源代码
│       ├── index.html // 示例 html
│       └── app.js // 添加到 react-dom 的文件
├── package.json 
├── src // 组件源代码
│   └── index.js // 组件源代码文件
├── .babelrc
├── .editorconfig // 不必须的，但是建议有
├── .gitignore // 如果要放到 github 上，这个是需要有的
└── webpack.config.js

Давайте создадим еще один простейший компонент для демонстрации:

/*** src/index.js ***/
import React from 'react';
const ReactDemo = () => (
 <h1>这是我的第一个 react npm 组件</h1>
);
export default ReactDemo;

Затем добавьте демо

<!-- examples/src/index.html -->
<html>
<head>
    <title>My First React Component</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
    <div id="root"></div>
</body>
</html>

/*** examples/src/app.js ***/
import React from 'react'
import { render } from 'react-dom'
import ReactDemo from '../../src'

const App = () => <ReactDemo />
render(<App />, document.getElementById('root'))

Обратите внимание, что ReactDemo в демо импортируется из ../../src

Затем настройте очень простой веб-пакет, создайте файл webpack.config.js в корневом пути проекта.

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
	template: path.join(__dirname, "./example/src/index.html"),
	filename: "./index.html"
});

module.exports = {
	entry: path.join(__dirname, "./example/src/app.js"),
	output: {
		path: path.join(__dirname, "example/dist"),
		filename: "bundle.js"
	},
	module: {
		rules: [{
			test: /\.(js|jsx)$/,
			use: "babel-loader",
			exclude: /node_modules/
		}]
	},
	plugins: [htmlWebpackPlugin],
	resolve: {
		extensions: [".js", ".jsx"]
	},
	devServer: {
		port: 3001
	}
};

WebPack Основной файл конфигурации Для выполнения следующих вещей:

  • Используйте пример / SRC / index.js в качестве ввода проекта для обработки зависимостей файлов ресурсов
  • Компиляция и обработка файлов js и jsx через babel-loader
  • Автоматически внедрять скомпилированные и упакованные файлы скриптов через html-webpack-plugin
  • Запустите службу на порту 3001 для демонстрации

Затем настройте его сноваbabel, нашbabelВ основном делать две вещи,jsxскомпилировано вes5, а затем добавьте универсальныйenv,так.babelrcКонфигурация выглядит следующим образом:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

можно увидеть предыдущийpackage.json,Я здесьbabelустановлен7.x,Такbabel-loaderТак должно быть8.xтогдаbabel 7.xПо сравнению с предыдущей конфигурацией отличается.Для использования этой конфигурации версия должна быть такой же как у меня, иначе конфигурация может быть другой.

а теперь выполнитеnpm start, а затем посетите localhost:3001, чтобы получить к нему доступ.

Напишите README

Напишите README. Если вы не знаете, как его написать, я дам вам несколько советов. Вы можете выбрать пункты, которые, по вашему мнению, необходимо написать:

  1. logo
  2. Официальная домашняя страница
  3. представлять
  4. Установить
  5. быстрый старт
  6. список функций
  7. снимок экрана
  8. todoList
  9. недостаточность
  10. FAQ
  11. Журнал изменений

Добавить значок

Когда вы пишетеREADMEПосле этого мы добавим немногоshields.ioмодный значок, чтобы люди знали, что мы классные и профессиональные.

Какие значки вы хотите добавить, зависит от вас, существует много типов.

Могукликните сюдаСм. README для трехмерного облака тегов, которое я написал ранее.

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

Опубликуйте онлайн-демонстрацию на страницах GitHub.

Чтобы опубликовать онлайн-демонстрацию, вы можете напрямую использовать Github Pages, чтобы помочь нам разместить, создать версию рабочей среды через веб-пакет, а затем отправить ее на Github.

Сначала перейдите на Github и создайте репозиторий для кода вашего компонента.

Затем инициализируйте свой проект в качестве проекта Git:

git init

Затем добавьте удаленный склад, чтобы связать локальный склад с удаленным складом.

git remote add origin git@github.com:crazylxr/react-demo.git

Далее мы можем установитьgh-pagesЧтобы помочь нам опубликовать на страницах github:

npm i gh-pages -D

Для удобства памяти, продолжения можно выпускать быстрее, эти заказы мы можем написать npm-скриптом, поэтому добавляем два скрипта:

{
  "name": "@taoweng/react-demo",
  "version": "1.0.0",
  "description": "react demo",
  "main": "lib/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open development",
    "build": "webpack --mode production",
    "deploy": "gh-pages -d examples/dist",
    "publish-demo": "npm run build && npm run deploy"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "gh-pages": "^2.0.1",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {}
}

Добавленdeployсценарий иpublish-demo, когда вам нужно будет опубликовать демо в будущем, вам нужно всего лишьnpm run publish-demoВот и все.

Тогда мы можем построить проект и опубликовать испасы / отрыв в филиал GH-Pages:

npm run build
npm run deploy

или напрямую

npm run publish-demo

Примечание: В ветку ph-pages будут опубликованы только файлы из каталога expample/src. Ветки master по-прежнему нет на github. Если вы хотите поместить исходный код в master или другие ветки github, вам все равно нужно нажать это сами.

В это время мы можем пройтиcrazylxr.github.io/react-demoПосетите демо, которое мы написали. Crazylxr — это имя пользователя github, а react-demo — имя репозитория. Пожалуйста, измените его на свое.

Скомпилируйте исходный код

Наш текущий исходный кодjsxпоэтому нам нужно пройтиbabelПучокjsxСкомпилирован в код, к которому может получить доступ обычный браузер. мы можем пройтиbabel-cliчтобы скомпилировать наш код, скомпилируйте напрямуюsrcкаталог, чтобыlibпапка. Дополнительные команды см.babel-cli

npx babel src --out-dir lib

После выполнения этой команды поставьтеlibПапка, затем внутриindex.jsЭто скомпилированный файл, который можно напрямую опубликовать вnpmдокумент.

Затем напишите эту команду компиляции вscriptвнутри,package.jsonследующим образом:

{
  "name": "@taoweng/react-demo",
  "version": "1.0.0",
  "description": "react demo",
  "main": "lib/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open development",
    "build": "webpack --mode production",
    "compile": "npx babel src --out-dir lib",
    "deploy": "gh-pages -d example/dist",
    "publish-demo": "npm run build && npm run deploy"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "gh-pages": "^2.0.1",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {}
}

затем скомпилировать позжеsrcСледующий код просто должен быть выполнен:

npm run compile

Теперь, когда у нас есть скомпилированный код, мы можем опубликовать его в npm для использования другими.

Опубликовать пакет npm

Перед публикацией нам нужны некоторые приготовления:

Зарегистрируйте учетную запись npm:

это здесь](www.npmjs.com/) для регистрации учетной записи npm.

Авторизоваться

Введите в терминале:

npm adduser

Вы также можете использовать:

npm login

Затем вы получите файл, который позволит вам ввестиusername,passwordи **email **, заполните их в соответствующих позициях.

Замечания по package.json

Информация о конфигурации в Package.json очень важно, я объясняю несколько важных конфигураций.

  • name: имя пакета, если вы учитесь, рекомендуется добавить область действия, которая находится выше меня.@taoweng/react-demoвместоreact-demo, потому что пакетов npm так много, это легко повторить. Таким образом, пакет будет закрытым, и к нему можно будет получить доступ черезnpm publish --access=publicСделайте этот пакет общим пакетом.

  • version: Версия пакета, версия каждого выпуска не может быть такой же, как в прошлый раз. Подробная спецификация видимаздесь

  • description: Введение в пакет.

  • repository: подходит для написания адресов Github, рекомендуется писать::username/:repository.

  • license: Аутентификация. Если вы не знаете, что использовать, просто напишите MIT.

  • main: Файл входа пакета. Это входной файл, который загружается при вводе пакета.

  • keywords: добавьте несколько ключевых слов, чтобы ваш пакет было легче найти.

точнееpackage.jsonконфигурация виднаОфициальный сайт.

Я просто добавил эту информацию здесь:

{
  "name": "@taoweng/react-demo",
  "version": "1.0.0",
  "description": "react demo",
  "main": "lib/index.js",
  "repository": "crazylxr/react-demo",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open development",
    "build": "webpack --mode production",
    "compile": "npx babel src --out-dir lib",
    "deploy": "gh-pages -d example/dist",
    "publish-demo": "npm run build && npm run deploy"
  },
  "keywords": ["react", "demo"],
  "author": "taoweng",
  "license": "MIT",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "gh-pages": "^2.0.1",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {}
}

Эта информация о конфигурации будет отображаться на странице пакета npm, поэтому вы можете заполнить ее или заполнить:

Наконец, мы добавляем в проект файл .npmignore, который аналогичен .gitignore, то есть файлам и папкам, которые нужно игнорировать при публикации npm:

# .npmignore 
src
examples
.babelrc
.gitignore
webpack.config.js

На данный момент мы можем опубликовать в npm:

npm publish

Если вы частный пакет, его можно выпустить:

npm publish --access=public

Эпилог

Когда в будущем будет выпущена новая версия, вам нужно будет только изменить номер версии в package.json, а затем выполнить npm publish и npm run publish-demo для синхронизации npm и demo.

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

Кроме того, прежде чем писать компоненты, вы можете узнать, есть ли аналогичные компоненты. Если они есть, используйте их напрямую. Давайте встанем на плечи гигантов и направим наше драгоценное время на создание ценности.

Наконец, посмотрите исходный код всего проектаgithub

Справочная статья

Кроме того

Вы также можете найти эту статью в следующих местах:

  1. персональный сайт
  2. github blog

Также интересно, можете обратить внимание на мой публичный номер: фронтенд Таоюань

Категории