关于javascript:开源PoemKit工具包-基于React从零完整构建一个前后端分离网站

打杂到肯定时候，也要总结总结，4 年前 UI 工作做得蛮多，目前开发工作接触的蛮多，其实就是为了我的项目的落地不求人，人不知; 鬼不觉学了些货色，空闲之余做了一些货色。

明天有有数的 React UI 工具包和库。那面对这么多抉择，面对新的我的项目挑战，我下一步应该做什么？是学习新框架，还是本人造轮子，还是去开掘一些工具，总之，我须要一个思考，以便更好高空对将来更多的技术需要和变革。框架毕竟只是框架，抛开场景谈用处都不对，我应该思考如何从个人成长和我的项目需要，语言基本功的训练等方面来布局将来，布局这个开源工具的工作。这就是为什么在一年中这个忙碌的工夫里，我依然抽时间学习一些前端或后端的技术，它们如此重要。不过，首先我会思考某些框架是否适宜去采纳。另外我特地关注 2021 年至 2022 年新冠病毒的大风行对工作对行业倒退的各种影响。

上面是这个小玩意儿的预览：

Github 资源：https://github.com/xizon/poemkit

PoemKit 能够间接通过命令工作和部署到云服务器, 但依然须要在其背地编写真正的代码，这些工具包作为 UI 组件和逻辑模块，能够组合成一个真正的应用程序原型。它依然须要编程性能能力使它们在理论需要中工作。

这个我的项目的一个乏味的方面，其实是对 webpack 很强的自定义个性，如果你想疾速用于产出，也能够间接导入蚂蚁组件等第三方组件库，为了进一步欠缺模型，PoemKit 提供了 50 多个内置 UI 组件，用于构建古代 Web 应用程序。

先说说我的想法吧。

为了适应一些大型的网站平台和软件我的项目，我思考了一些 React 框架，比方 Nextjs，然而最终我决定临时放弃它(只是暂时性的，对于将来的某些我的项目也可能间接采纳)，我想让网站的架构可能自在的操控，比方 webpack 脚手架的功能性，扩展性。一方面从零开始搭建 webpack 脚手架，也可能让我深刻学习各方面的常识，让我零碎的理解 React 网站的架构原理和实现办法，同时将它积淀为开源的工具箱，可能在将来给我的我的项目提供必要的反对和参考。

如果进行数据传输，那么我将优先应用 Redux 来做跨组件状态管理器，将来依据我的项目须要也会应用一些便携的工具包。我将所有的 UI 组件都应用 TypeScript 来编写，一方面组件库系统化利于治理，一方面它们和整个 React 网站的逻辑区块不会抵触。它还要可能间接导入其它 UI 组件库，比方 Ant Design. 于此同时，该工具箱须要内置自定义 React 组件，以不便集成并改善开发人员体验。

对于制作一个前后端齐全拆散的网站，我还须要思考响应式和一些酷炫的交互成果，简单的动画我应用了 GSAP 插件，并且让整个网站兼容 Bootstrap 和常见的图标库，以提供更加敌对的款式反对。它和自身内置的款式和脚本不抵触，这是我对于我的项目交互复杂化的思考。

最初须要思考 SEO 的问题，我也会进一步解决。比方让整个 React 网站反对自定义的 meta 标签和 title 等，至于性能，组件之间的通信和挂载、卸载，都严格参考相干的官网文档，做了脚本优化的解决。

当然，对于一个学习人，我的代码和脚本并不是十分高端和优良，然而整个开源产品让我的思维和整体技术失去了十分多的学习和晋升，也让我对将来的新我的项目多了很多抉择。我心愿它能给大家带来一些用处，也非常感谢大家急躁浏览我的文字。

接着，我还须要为他取一个不错的名字，因为我喜爱 WordPress，WordPress 有一句谚语：Code is Poetry. 说的就是代码如同诗歌个别美好。做这个工具包，我也是为了做出更加如诗美好的网站而致力，所以 PoemKit 就算这么来的。

演示

在线演示 https://uiux.cc/poemkit

服务器端运行 http://localhost:3000

介绍

• 根底环境: TypeScript 4.x.x + Babel 7.x.x + Webpack 5.x.x
• 提供结构化布局对象、UI 控件等多种预置 UI 组件
• 可拜访的 URL、SEO 优化，以及应用 React Helmet 使您的站点对搜索引擎敌对
• 集开发、调试、打包和部署为一体
• 它不是一个 JavaScript 框架
• 没有 jQuery 且不绑定任何工具库
• 反对服务器端渲染（SSR）
• 组件拆散，能够导入任何第三方 UI 组件到我的项目 (比方 Ant Design)
• 应用 Sass/SCSS 来设置 React 组件的款式
• 主动捆绑并生成独立的外围 CSS 和 JS 文件
• 反对通过 pm2 主动部署到服务器
• ✂️ 插件扩大: 默认组件演示导入了诸如 Bootstrap4 栅格零碎, GSAP 动画库, FontAwesome 图标库, 3D 引擎等罕用的第三方插件，以便可能疾速扩大您的网站 (能够按需配置须要导入的库或者插件)
• ✂️ 可配置脚手架: 独立打包 dist 文件（您能够自主批改 webpack.config.js 应用内存挂载）

开发者基本操作:

1. 配置你电脑的 Node.js 环境，举荐 Node 14+ 版本，测试环境为 v14.16.0
2. 下载完资源后，进入到 poemkit 目录下，运行相干命令进行开发或者部署。
3. 当你须要配置脚手架和网站根底信息和构造的时候，可编辑 package.json 文件。
4. 我的项目文件会打包生成到 ./dist/* 和 ./public/*.html.

命令应用办法:

Step 1. 下载我的项目

$ sudo npm install poemkit

或者克隆我的项目:

$ git clone git://github.com/xizon/poemkit.git

Step 2. 应用命令进入 poemkit/ 目录, {your_directory}换成你的目录门路

$ cd /{your_directory}/poemkit

Step 3. 装置所须要的依赖项

$ sudo npm install

Step 4. 罕用的命令:

调试应用程序, 它能够用来独自查看 TypeScript 类型的文件而不进行编译操作，便于进步开发效率，专一整体代码的编写。

$ npm run check

打包生成 CSS，JS，HTML 文件

$ npm run build

运行上面的命令进行本地测试和代码查看 (仅运行 Express 服务器）。应用 Ctrl + C 退出终端

$ npm run dev

Step 5. 浏览器中拜访以下网址，可疾速调试：

http://localhost:3000

倡议在调试之前将新代码从新编译打包。

Step 6 (可选). 用 PM2 启动 Reactjs 应用程序（仅在应用 Node v13.9.0 或更高版本时无效）。

6.1) 装置 Node 和 NPM

$ curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
$ sudo yum install nodejs
$ node --version  #v14.16.1
$ npm --version   #6.14.12
$ which node babel-node #check the location of node and babel-node

6.2) 全局装置 PM2

$ sudo npm install pm2@latest -g

6.3) 全局装置 Babel

$ sudo npm install -g babel-cli
$ sudo npm install -g @babel/core @babel/cli @babel/preset-env 

6.4) 全局装置 TypeScript 和 ts-node

$ sudo npm install -g typescript ts-node

6.5) 应用 PM2 装置 TypeScript 依赖

$ sudo pm2 install typescript

6.6) PM2 常用命令:

# 先进入 `"poemkit/"` 目录 
$ cd /{your_directory}/poemkit


#用 pm2 运行利用
$ pm2 start ecosystem.config.js

#其它命令
$ pm2 restart ecosystem.config.js
$ pm2 stop ecosystem.config.js
$ pm2 delete ecosystem.config.js
$ pm2 list
$ pm2 logs

6.7) 应用域名拜访您的 React 利用。

须要在 Apache 或 Nginx 的 Web 服务器上部署 React App。请参考网络以获取无关设置代理的教程。

Step 7 (可选). 单元测试

$ npm run test

Step 8 (可选). 部署到服务器

$ npm run deploy

撤销现有部署:

$ npm run destroy

⚙️ 舒适提醒:

a) ERROR: npm update check failed.

如果呈现如上谬误，示意 nodejs 的环境或权限问题，能够应用上面的命令解决，留神把 {username} 换成你本人的设施里的名字。

$ sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.config

b) ERROR: Node sass version 6.x.x is not compatible with ^ 4.x.x.

如果呈现如上谬误, 请批改 node-sass 的版本:

$ npm install node-sass@4.14.1

c) 如果降级 Node 版本，请执行以下代码：

$ sudo npm install
$ sudo npm rebuild node-sass

⚙️ 配置模块和别名:

您能够通过批改 webpack.config.js 的 resolve 属性来创立 import 或 require 的别名，来确保模块引入变得更简略.

webpack.config.js :

...
const alias = {
    pathConfig            : './src/config',
    pathComponents        : './src/client/components',
    pathRouter            : './src/client/router',
    pathHelpers            : './src/client/helpers',
    pathServices          : './src/client/services',
    pathReducers          : './src/client/reducers',
    pathPages             : './src/client/views/_pages',
    pathActions           : './src/client/actions',
    pathServer            : './src/server',
    pathStore             : './src/store'
};

...
resolve: {extensions: ['.js', '.es6', '.vue', '.jsx', '.ts', '.tsx'],
    alias: {

        // 须要同时配置 `babel.config.js` 和 `tsconfig.json` 文件
        '@poemkit/config': path.resolve(__dirname, alias.pathConfig),
        '@poemkit/components': path.resolve(__dirname, alias.pathComponents),
        '@poemkit/router': path.resolve(__dirname, alias.pathRouter),
        '@poemkit/helpers': path.resolve(__dirname, alias.pathHelpers),
        '@poemkit/services': path.resolve(__dirname, alias.pathServices),
        '@poemkit/reducers': path.resolve(__dirname, alias.pathReducers),
        '@poemkit/pages': path.resolve(__dirname, alias.pathPages),
        '@poemkit/actions': path.resolve(__dirname, alias.pathActions),
        '@poemkit/server': path.resolve(__dirname, alias.pathServer),
        '@poemkit/store': path.resolve(__dirname, alias.pathStore),

    }
},
...

babel.config.js :

...
  "plugins": [
    ["module-resolver", {"root": ["./src"],
      "alias": {
        "@poemkit/config": "./src/config",
        "@poemkit/components": "./src/client/components",
        "@poemkit/router": "./src/client/router",
        "@poemkit/helpers": "./src/client/helpers",
        "@poemkit/services": "./src/client/services",
        "@poemkit/reducers": "./src/client/reducers",
        "@poemkit/pages": "./src/client/views/_pages",
        "@poemkit/actions": "./src/client/actions",
        "@poemkit/server": "./src/server",
        "@poemkit/store": "./src/store"
      }
    }]
  ]
...

tsconfig.json :

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {"@poemkit/config/*": ["config/*"],
        "@poemkit/components/*": ["client/components/*"],
        "@poemkit/router/*": ["client/router/*"],
        "@poemkit/helpers/*": ["client/helpers/*"],
        "@poemkit/services/*": ["client/services/*"],
        "@poemkit/reducers/*": ["client/reducers/*"],
        "@poemkit/pages/*": ["client/views/_pages/*"],
        "@poemkit/actions/*": ["client/actions/*"],
        "@poemkit/server/*": ["server/*"],
        "@poemkit/store/*": ["store/*"]
    }
  }
}

package.json :

{
  "jest": {
    "testEnvironment": "jsdom",
    "moduleNameMapper": {"\\.(css|less|scss|sass)$": "identity-obj-proxy",
      "^@poemkit/config/(.*)": "<rootDir>/src/config/$1",
      "^@poemkit/components/(.*)": "<rootDir>/src/client/components/$1",
      "^@poemkit/router/(.*)": "<rootDir>/src/client/router/$1",
      "^@poemkit/helpers/(.*)": "<rootDir>/src/client/helpers/$1",
      "^@poemkit/services/(.*)": "<rootDir>/src/client/services/$1",
      "^@poemkit/reducers/(.*)": "<rootDir>/src/client/reducers/$1",
      "^@poemkit/pages/(.*)": "<rootDir>/src/client/views/_pages/$1",
      "^@poemkit/actions/(.*)": "<rootDir>/src/client/actions/$1",
      "^@poemkit/server/(.*)": "<rootDir>/src/server/$1",
      "^@poemkit/store/(.*)": "<rootDir>/src/store/$1"
    },
    "transform": {"^.+\\.(js|jsx)$": "babel-jest",
      "^.+\\.(ts|tsx)?$": "ts-jest"
    }
  }
}

⚙️ 库相干配置:

您能够通过批改 webpack.config.js 的 output 属性来批示 webpack 如何去输入、以及在哪里输入你的「bundle、asset 和其余你所打包或应用 webpack 载入的任何内容」

...
const globs = {
    port                  : 8080,
    examples              : 'public',
    build                 : 'src/client',
    dist                  : 'dist'
};

...
output: {path: path.resolve(__dirname, './' + globs.dist + '/js'),
    filename: '[name].js'
},
...

⚙️ 网站配置:

批改 package.json 文件即可：

{
  "author": "UIUX Lab",
  "name": "poemkit",
  "email": "uiuxlab@gmail.com",
  "version": "1.0.0",
  "projectName": "PoemKit",
  "createdInfo": "UIUX Lab (https://uiux.cc)",
  "projectURL": "https://uiux.cc",
  "description": "React Toolkit for Building a Full Website",
  ...
}

⚙️ 路由配置:

路由配置同时也兼顾了网站的主导航（不包含将在主导航的页面上配置的嵌套路由）。拜访文件 ./src/client/router/RoutesConfig.js.

路由器的一些脚本能够在文件中批改 ./src/client/router/App.js.

⚙️ 服务端渲染配置:

服务端渲染和标签替换的一些脚本能够在文件中批改 ./src/server/renderer.js.

⚙️ 设置服务器代理:

为了同时运行服务器和 React 应用程序，咱们须要在 package.json 中增加proxy 键。咱们曾经将服务器设置为在端口 3000 上运行，因而将代理指向 localhost:3000。

{
  "proxy": "http://localhost:3000",
  ...
}

⚙️ 应用 PropTypes 查看类型:

$ npm run dev

应用上面的 JavaScript 脚本能够编写调试代码，在终端显示谬误和正告信息。

import PropTypes from "prop-types";
import React, {Component} from 'react';

export default class YourComponentName extends Component {public static propTypes = {};
    constructor(props) {super(props);
    }
    render() { ...}
}

if (process.env.NODE_ENV === 'development') {

    YourComponentName.propTypes = {
        displayEnable: PropTypes.bool.isRequired,
        htmlString: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
    }
    
}

⚙️ 自定义导入的第三方库或插件:

利用默认加载了罕用的第三方库(图标，动画，3D 引擎等)，您能够按需加载，或者批改导入配置。第三方插件配置文件位于 ./src/client/components/_plugins/. 第三方插件默认和自定义组件一起应用，您也能够被动移除它们。

⚙️ 网站根目录配置:

更改网站的根目录，以便您的我的项目上传到另一个目录时能够应用它。批改 ./src/config/websiteConfig.js 的键 rootDirectory。

如果该文件位于根目录中，则能够将其保留为空。如果在另一个目录中，则能够写成 “/blog” (结尾不要加斜杠)

{"rootDirectory": ""}

⚙️ 网站 URL 配置:

网站地址 (URL) 通常被用于 SEO 优化。批改 ./src/config/websiteConfig.js 的键 siteUrl。一个残缺的 URL 个别被命名为 https://domain-name.com (结尾不要加斜杠和子目录名称)

{"siteUrl": ""}

⚙️ 接口 API 配置:

批改 ./src/config/websiteConfig.js 的键 API, 如下代码:

{
  "API": {
      "RECEIVE_DEMO_LIST": "https://apiurl1.com",
      "RECEIVE_DEMO_LISTDETAIL": "https://apiurl2.com"
  }
}

目录构造

poemkit/
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── ecosystem.config.js ------------------------- # 用于 pm2 部署
├── babel.config.js
├── webpack.config.js 
├── package-lock.json
├── package.json 
├── test/            --------------------------- # 单元测试脚本
├── public/          --------------------------- # 主动生成的首页 HTML 动态模板
│   ├── index.html 
│   ├── manifest.json
│   └── server/   ------------------------------- # 用于服务器测试的 PHP 脚本
│   └── assets/
├── dist/         ------------------------------- # web 编译出的文件，用于生产环境
│   ├── css/
│   │   ├── poemkit.css
│   │   └── poemkit.min.css
│   └── js/
│   │   ├── poemkit.js
│   │   └── poemkit.min.js
├── src/
│   ├── client/
│   │   ├── client.js
│   │   ├── actions/
│   │   ├── reducers/
│   │   ├── helpers/
│   │   ├── services/
│   │   ├── router/
│   │   ├── components/ -------------------------  # 独立的 UI 组件
│   │   │     ├── */
│   │   │     ├── _utils/ -----------------------  # 罕用的实用程序和款式脚本
│   │   │     └── _plugins/ ---------------------  # 第三方插件
│   │   ├── views/ ------------------------------  # 网站页面
│   │   │     ├── _pages/
│   │   │     └── _html/
│   └── server/
│   │   ├── app.js
│   │   ├── server.js
│   │   └── renderer.js
│   └── store/
│   │   └── createStore.js
│   └── config/
│   │   ├── tmpl-manifest.json  ------------------  # 主动生成的 `manifest.json` 文件模板
│   │   └── websiteConfig.js  --------------------  # 网站配置文件(比方根目录)
└──

兼容性

反对的开发环境

• 反对 React 17 +
• 反对 ReactTypeScript 4.x.x +
• 反对 ReactBabel 7.x.x +
• 反对 ReactWebpack 5.x.x

这些是我的想法。如果您想探讨某些内容或对如何改良有更多意见，请随时通知我！感激！