chore: 替换 moment 为 dayjs

Author: alvin0216

config/webpack.config.js

@@ -27,6 +27,7 @@ const typescriptFormatter = require('react-dev-utils/typescriptFormatter')
 const CompressionPlugin = require('compression-webpack-plugin')
 
 // ==== plugins
+const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
 const os = require('os')
@@ -613,6 +614,9 @@ module.exports = function(webpackEnv) {
           formatter: isEnvProduction ? typescriptFormatter : undefined
         }),
       isEnvProduction && new CompressionPlugin(),
+      new AntdDayjsWebpackPlugin({
+        preset: 'antdv3'
+      }),
       new HappyPack({
         id: 'babelInside',
         threadPool: happyThreadPool, // 指定进程池

package.json

@@ -17,6 +17,7 @@
     "camelcase": "^5.2.0",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "css-loader": "2.1.1",
+    "dayjs": "^1.8.31",
     "dotenv": "6.2.0",
     "dotenv-expand": "4.2.0",
     "eslint": "^6.1.0",
@@ -142,6 +143,7 @@
   },
   "devDependencies": {
     "add-asset-html-webpack-plugin": "^3.1.3",
+    "antd-dayjs-webpack-plugin": "^1.0.0",
     "babel-plugin-import": "^1.12.1",
     "compression-webpack-plugin": "^3.0.0",
     "git-cz": "^3.3.0",

src/components/Discuss/list.jsx

@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
-import PropTypes from 'prop-types'
 
 import axios from '@/utils/axios'
 import { translateMarkdown } from '@/utils'
-import moment from 'moment'
+import dayjs from '@/utils/dayjs'
 import AppAvatar from '@/components/Avatar'
 import { Comment, Button, Tooltip, Input, Icon, Popconfirm, message } from 'antd'
 
@@ -85,7 +84,7 @@ function CommentItem(props) {
       }
       datetime={
         <Tooltip title={item.createdAt}>
-          <span>{moment(item.createdAt).fromNow()}</span>
+          <span>{dayjs(item.createdAt).fromNow()}</span>
         </Tooltip>
       }>
       {replyVisible && (

src/utils/dayjs.js

@@ -0,0 +1,6 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+dayjs.extend(relativeTime)
+
+export default dayjs

src/views/admin/article/manager/index.jsx

@@ -5,7 +5,7 @@ import { Table, Form, Tag, Switch, message, Input, Button, Popconfirm, Select }
 import axios from '@/utils/axios'
 
 import { Link } from 'react-router-dom'
-import moment from 'moment'
+import dayjs from '@/utils/dayjs'
 import download from '@/utils/download'
 
 import useAntdTable from '@/hooks/useAntdTable'
@@ -62,12 +62,12 @@ function ArticleManager(props) {
       {
         title: '发布时间',
         dataIndex: 'createdAt',
-        sorter: (a, b) => (moment(a.createdAt).isBefore(b.createdAt) ? 1 : -1)
+        sorter: (a, b) => (dayjs(a.createdAt).isBefore(b.createdAt) ? 1 : -1)
       },
       {
         title: '修改时间',
         dataIndex: 'updatedAt',
-        sorter: (a, b) => (moment(a.updatedAt).isBefore(b.updatedAt) ? 1 : -1)
+        sorter: (a, b) => (dayjs(a.updatedAt).isBefore(b.updatedAt) ? 1 : -1)
       },
       {
         dataIndex: 'id',

src/views/admin/user/index.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Table, Input, Tag, Form, Switch, Button, Popconfirm, Select, DatePicker } from 'antd'
 
 import axios from '@/utils/axios'
-import moment from 'moment'
+import dayjs from '@/utils/dayjs'
 
 import useAntdTable from '@/hooks/useAntdTable'
 import useBreadcrumb from '@/hooks/useBreadcrumb'
@@ -52,7 +52,7 @@ function AdminUser(props) {
       {
         title: '注册时间',
         dataIndex: 'createdAt',
-        sorter: (a, b) => (moment(a.createdAt).isBefore(b.createdAt) ? 1 : -1)
+        sorter: (a, b) => (dayjs(a.createdAt).isBefore(b.createdAt) ? 1 : -1)
       },
       {
         dataIndex: 'id',

yarn.lock

@@ -1764,6 +1764,13 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+antd-dayjs-webpack-plugin@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/antd-dayjs-webpack-plugin/download/antd-dayjs-webpack-plugin-1.0.0.tgz#e3f4b0bce3985aa0d75a36341b3f9f67b486423a"
+  integrity sha1-4/SwvOOYWqDXWjY0Gz+fZ7SGQjo=
+  dependencies:
+    dayjs "*"
+
 antd@^3.26.6:
   version "3.26.8"
   resolved "https://registry.npm.taobao.org/antd/download/antd-3.26.8.tgz#e40982c5cdb6c5c2c5f037ead27889b5f71e4ea3"
@@ -3446,6 +3453,11 @@ data-urls@^1.0.0, data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+dayjs@*, dayjs@^1.8.31:
+  version "1.8.31"
+  resolved "https://registry.npm.taobao.org/dayjs/download/dayjs-1.8.31.tgz#0cd1114c2539dd5ad9428be0c38df6d4bb40b9d3"
+  integrity sha1-DNERTCU53VrZQovgw4321LtAudM=
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"