返回

React 搜索插件：从头到尾构建、发布和部署

前端

在现代 Web 开发中，插件已经成为构建复杂且可重用组件的关键部分。作为一名 React 开发人员，拥有编写和发布自己的插件的能力非常宝贵。在本文中，我们将踏上一个旅程，从头开始构建一个简单的 React 搜索插件，然后将其发布到 npm 并部署到 Github 页面。让我们开始吧！

构建 React 搜索插件

  1. 初始化项目： 使用 create-react-app 脚手架创建一个新的 React 项目。这将为您提供一个带有基本文件和依赖项的项目结构。

  2. 创建搜索组件： 在 src 目录中创建一个名为 Search.js 的新文件。在这个文件中，我们将编写我们的搜索组件。

import React, { useState } from 'react';

const Search = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <input type="text" placeholder="Search..." onChange={handleChange} value={searchTerm} />
    </div>
  );
};

export default Search;
  1. 编写搜索逻辑： 现在我们有了搜索组件，我们需要编写一些逻辑来处理搜索查询。创建一个名为 search.js 的新文件，并添加以下代码：
export const search = (items, searchTerm) => {
  return items.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase()));
};

这个函数接受一个项目数组和一个搜索项，并返回包含与搜索项匹配名称的项目的数组。

  1. 集成搜索组件： 现在我们已经有了搜索组件和搜索逻辑，让我们将它们集成到我们的应用程序中。在 App.js 文件中，添加以下代码：
import React, { useState } from 'react';
import Search from './Search';
import { search } from './search';

const App = () => {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ]);

  const handleSearch = (searchTerm) => {
    const results = search(items, searchTerm);
    setItems(results);
  };

  return (
    <div>
      <Search onSearch={handleSearch} />
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

这个代码将搜索组件添加到应用程序中，并调用 handleSearch 函数来处理搜索查询。当用户输入搜索项时，该函数将使用 search 函数搜索项目，并使用结果更新 items 状态。

发布到 npm

现在我们已经构建了我们的搜索插件，是时候将其发布到 npm 了。这将使其他开发人员可以在其项目中使用它。

  1. 创建 package.json 文件： 在项目根目录中创建一个名为 package.json 的文件，并添加以下内容：
{
  "name": "react-search-plugin",
  "version": "1.0.0",
  "description": "A simple React search plugin.",
  "main": "dist/index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open",
    "test": "react-scripts test",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "react": "^17.0.2"
  },
  "author": "Your Name"
}
  1. 安装和配置 Webpack： 安装 Webpack 并将其添加到 package.json 的 scripts 部分：
npm install --save-dev webpack webpack-cli
  1. 创建 Webpack 配置文件： 在项目根目录中创建一个名为 webpack.config.js 的文件，并添加以下内容：
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'ReactSearchPlugin',
    libraryTarget: 'umd',
  },
  externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
    },
  },
};
  1. 构建并发布插件： 运行以下命令来构建和发布插件：
npm run build
npm publish

部署到 Github 页面

发布插件后，我们可以通过将其部署到 Github 页面使其在 Web 上可用。

  1. 创建 Github 存储库： 为您的插件创建一个新的 Github 存储库。

  2. 初始化 Git： 在您的本地项目中初始化 Git 并将代码推送到您的存储库：

git init
git add .
git commit -m "Initial commit"
git push origin main

  1. 启用 Github 页面： 在您的存储库设置中，启用 Github 页面并选择 main 分支。

  2. 创建 index.html 文件： 在您的 public 目录中创建一个名为 index.html 的文件，并添加以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="/dist/index.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script>
      const rootElement = document.getElementById('root');
      ReactDOM.render(<ReactSearchPlugin />, rootElement);
    </script>
  </body>
</html>
  1. 部署： 将 public 目录推送到 gh-pages 分支：
git checkout -b gh-pages
git add -f public
git commit -m "Deploy to Github Pages"
git push origin gh-pages --force

现在，您的插件已经部署到 Github 页面，可以在线访问。您可以通过访问存储库 URL 并附加 /index.html 来查看它，例如：

https://github.com/your-username/react-search-plugin/index.html

结论

恭喜您构建、发布和部署了自己的 React 搜索插件！通过遵循本指南中的步骤，您已经掌握了编写、分发和共享 React 插件的技能。我希望这篇文章对您有所帮助，如果您有任何问题或需要进一步的指导，请随时联系我。