Создание каркаса проекта корпоративного уровня Next.js + TS + Antd + Redux + Storybook

внешний интерфейс React.js

предисловие

⭐Nextjs-TS-Antd-Redux-Storybook-Jest-Starter

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

Говоря о Next.js, я написал статью в августе.Практика с вами, чтобы начать работу с NextJs (v9.5), в основном из-за того, что большинство Next.js в Интернете — это учебники по старой версии v7.x, поэтому я написал более новую версию 9.5.Я не ожидал, что Next.js 10 будет выпущен в октябре, и меня застали врасплох , но часть обновления в основном касается оптимизации изображения и т. д., вы все еще можете это увидеть.

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

Основная библиотека и версия скаффолдинга:

Next.js 10.x
React 17.x
TypeScript 4.x
Ant Design 4.x
Styled-components 5.x
Storybook 6.x

Инициализация шаблона Next.js

npx create-next-app nextjs-ts-redux-antd-starter

Добавить поддержку TypeScript

Новое в корневом каталогеtsconfig.jsonфайл, запуститьyarn dev, вы увидите, что он предлагает нам установить библиотеку типов

yarn add --dev typescript @types/react @types/node

Кстати@types/react-domтакже наденьте

После установки запуститеyarn dev, будет автоматически сгенерирован в корневом каталогеnext-env.d.tsфайл иtsconfig.jsonС конфигурацией по умолчанию здесь я внесу небольшое изменение в конфигурацию.

Для получения подробной информации, пожалуйста, обратитесь к официальному сайту ТС.элемент конфигурации:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": [
        "src/*"
      ]
    },
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "allowJs": true, // 允许编译js文件
    "jsx": "preserve", // 在 .tsx文件里支持JSX
    "noEmit": true, // 不输出文件
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ], // TS需要引用的库，即声明文件
    "esModuleInterop": true, // 允许export=导出，由import from导入
    "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
    "allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入
    "isolatedModules": true, // 将每个文件作为单独的模块
    "resolveJsonModule": true, // 允许把json文件当做模块进行解析
    "skipLibCheck": true, // 跳过所有声明文件的类型检查
    "forceConsistentCasingInFileNames": true // 不允许对同一文件使用不一致大小写的引用
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    ".next",
    "dist"
  ]
}

Затем очистите чистый каталог, поместитеstyles, pagesостался только одинindex.jsможет быть иindex.jsпереименован вindex.tsx

import { NextPage } from 'next'

const Home: NextPage = () => {
  return <div>Hello nextjs-ts-redux-antd-starter</div>
}

export default Home

EditorConfig

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

.editorconfigЭто файл конфигурации, который поддерживает единый стиль кодирования в редакторах.В VSCode вам необходимо установить соответствующий плагин EditorConfig для VS Code.После установки вы можете ввестиGenerate .editorcofigможно быстро сгенерировать.editorconfigфайл, или вы можете создать новый файл самостоятельно.

существует.editorcofigфайл, вы можете установить файл по разному, например, мой такой:

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

Prettier

yarn add prettier -D

Вам также необходимо установить плагин VSCodePrettier - Code formatter

создать новый файл.prettierrc

{
  "singleQuote": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "avoid",
  "semi": false,
  "bracketSpacing": true,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

добавить файл игнорирования.prettierignore

**/*.png
**/*.svg
**/*.ico
package.json
lib/
es/
dist/
.next/
coverage/
LICENSE
yarn.lock
yarn-error.log
*.sh
.gitignore
.npmignore
.prettierignore
.DS_Store
.editorconfig
.eslintignore
**/*.yml

ESLint

yarn add eslint -D

запустить после установкиnpx eslint --init, есть варианты после запуска, выбирайте следующим образом (в зависимости от ваших потребностей):

  • To check syntax, find problems, and enforce code style
  • JavaScript modules (import/export)
  • React
  • TypeScript Yes
  • Browser Node
  • Use a popular style guide
  • Airbnb: GitHub.com/air не NB/Java…
  • JavaScript
  • Would you like to install them now with npm (Yes)

Он появится после установки npmpackage-lock.json, если вы хотите использовать значение по умолчаниюyarn.lock, удалите его, чтобы избежать конфликтов.

Установить автоматически сгенерированный.eslintrcФайл еще не закончен, чтобы писать код лучше и больше в соответствии с нормами сообщества, мы добавим несколько хороших плагинов eslint.

  • eslint-plugin-unicorn: Предоставляет очень полезный набор правил, таких как циклическое обнаружение зависимостей, ограничения стиля имени файла и т. д.
  • eslint-config-prettier: Когда Eslint и Cretetier используются вместе, правила должны быть изменены для предотвращения дублирования или конфликта; этот плагин существует для решения этой проблемы, и ее можно использовать для закрытия всех правил, которые могут вызвать конфликты.
  • eslint-plugin-import: может быть правильно проанализирован.tsx, .ts, .js, .jsonИмя суффикса (также необходимо указать разрешенный суффикс имени и добавить его в поле настроек)
  • eslint-import-resolver-alias: eslint может распознавать пользовательский путь псевдонима псевдонима
  • eslint-import-resolver-typescript:Позволятьeslint-plugin-importможно правильно разобратьtsconfig.jsonсерединаpathsсопоставление, его необходимо установить.

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

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb',
    'plugin:react/recommended',
    'plugin:import/typescript',
    'plugin:@typescript-eslint/recommended',
    'prettier/react',
  ],
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.tsx', '.ts', '.js', '.json'],
      },
      alias: [['src', './src']],
    },
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'react-hooks', 'unicorn'],
  rules: {
    semi: 0,
    indent: 0,
    'react/jsx-filename-extension': 0,
    'react/prop-types': 0,
    'react/jsx-props-no-spreading': 0,

    'jsx-a11y/click-events-have-key-events': 0,
    'jsx-a11y/no-static-element-interactions': 0,
    'jsx-a11y/no-noninteractive-element-interactions': 0,

    'no-use-before-define': 0,
    'no-unused-vars': 0,
    'implicit-arrow-linebreak': 0,
    'consistent-return': 0,
    'arrow-parens': 0,
    'object-curly-newline': 0,
    'operator-linebreak': 0,
    'import/no-extraneous-dependencies': 0,
    'import/extensions': 0,
    'import/no-unresolved': 0,
    'import/prefer-default-export': 0,
  },
}

создать новый файл.eslintignore, игнорируя некоторые проверки файлов

/node_modules
/public
/dist
/.next
/coverage

StyleLint

sass/less/css

  • eslint-config-prettier: Используйте плагин для отключения правил, конфликтующих с Prettier.
  • stylelint-config-rational-order: группировка и сортировка связанных свойств
  • stylelint-declaration-block-no-ignored-properties: стиль противоречия игнорируется
  • stylelint-order: заставляет вас писать css в определенном порядке

.stylelintrc

{
  extends: [
    'stylelint-config-standard',
    'stylelint-config-rational-order',
    'stylelint-config-prettier',
  ],
  plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties'],
}

styled-components

Выше приведена конфигурация, которую можно полностью скопировать с помощью sass или меньше.Что касается скаффолдинга, я решил использовать следующую схему CSS:styled-components, stylelint настраивает styled-components. В библиотеке еще не реализовано автоматическое восстановление, поэтому--fixВ настоящее время он недействителен и требует установки другого плагина правил stylelint.

yarn add styled-components
yarn add -D @types/styled-components stylelint-processor-styled-components stylelint-config-styled-components

.stylelintrc

{
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "plugins": [
    "stylelint-order"
  ],
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-styled-components"
  ]
}

новый файлbabel.config.js

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

ты можешь разделитьdevelopment,test,production, Различайте настройки стилевых компонентов, такие какbabel.config.js

создать новый файлpages/_document.tsx, чтобы переписать код в пользовательском стиле документа. Он будет вызываться только во время рендеринга на стороне сервера.Он в основном используется для изменения содержимого документа, отображаемого на стороне сервера, и обычно используется со сторонними решениями css-in-js.

import React from 'react'
import Document, { DocumentContext } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage
    try {
      const initialProps = await Document.getInitialProps(ctx)

      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        })

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

export default MyDocument

.vscode

Создайте новую папку в корневом каталоге.vscode, и создайте в этой папке новый файл settings.json. Конфигурация этого файла имеет приоритет над вашей собственной глобальной конфигурацией VSCode и не будет форматироваться по-разному из-за разных глобальных конфигураций VSCode разных членов команды.

settings.json

{
  "search.exclude": {
    "**/node_modules": true,
    "dist": true,
    ".next": true,
    "yarn.lock": true
  },
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

хриплый и ворсистый

Каждый раз, когда вы отправляете код, вы должны сначала проверить и отформатировать код, чтобы обеспечить согласованный стиль кода. Итак, мы устанавливаемhuskyЧтобы решить эту проблему, но мы хотим обрабатывать только код, который мы изменили (временная область) каждый раз, когда мы форматируем lint, мы можем выбратьlint-staged

yarn add -D husky lint-staged

существуетpackage.jsonНастройте действие хука фиксации git:

 "husky": {
    "hooks": {
      "commit-msg": "commitlint --config .commitlintrc.js -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged && yarn tsc"
    }
  },
  "lint-staged": {
    "*.{tsx,ts,js,jsx}": [
      "stylelint",
      "prettier --write",
      "eslint --fix"
    ],
    "*.{css,less,scss}": [
      "stylelint",
      "prettier --write"
    ],
    "*.{md,json,yaml,yml}": [
      "prettier --write"
    ]
  },

prettier --writeсередина--writeУказывает, что отформатированный код записывается в исходный файл, в противном случае файл будет выводиться.

над"pre-commit": "lint-staged && yarn tsc"я также добавилyarn tsc, есть проблема с типом проверки ts, конечно, он вам не будет представлен, и ошибки будут найдены рано.

Кроме того, требуется ли обязательное--fixПосмотрите на человека, потому что кто-то будет обеспокоен тем, что принуждение эквивалентно черному ящику, вы не знаете, что оно делает с вашим кодом.

commitlint

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

yarn add @commitlint/cli @commitlint/config-conventional -D

Типы коммитов git по умолчанию следующие.Это конфигурация коммитлинта в стиле angular.Я обычно привыкаю к ​​этому набору правил.

[
  'build',
  'ci',
  'chore',
  'docs',
  'feat',
  'fix',
  'perf',
  'refactor',
  'revert',
  'style',
  'test'
];

Новое в корневом каталоге.commitlintrc.js:

module.exports = {
  extends: ['@commitlint/config-conventional'],
}

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

  • cz-conventional-changelog: это адаптер, предустановка, соответствующая спецификации команды Angular.
yarn add cz-conventional-changelog -D

существуетpackage.jsonСредняя конфигурация

{
    "scripts": {
        "commit": "git-cz"
    },
    "config": {
        "commitizen": {
          "path": "node_modules/cz-conventional-changelog"
        }
    }
}

бегатьyarn commit, появится страница для выбора

Redux

Базовая конфигурация спецификации проекта почти такая же, и следующим шагом будет создание инструмента управления состоянием проекта.Я выбрал здесь самый классический Redux, выбор асинхронной обработкиredux-saga

yarn add redux react-redux redux-saga
yarn add -D @types/react-redux @types/redux-saga redux-devtools-extension next-redux-wrapper

У сообщества есть и другие решения по упрощению редукции, такие как использованиеredux-actions, но сопровождение проекта кажется сложным, поэтому использовать не буду, есть еще dva и т.п. или другие библиотеки управления состоянием типа mobx, замену можете рассмотреть сами, вот просто распространенное решение.

src/redux/index.ts

import { createWrapper, MakeStore } from 'next-redux-wrapper'
import { applyMiddleware, createStore } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly'

import rootReducer from 'src/redux/rootReducers'
import rootSaga from 'src/redux/rootSagas'

const makeStore: MakeStore<Store.RootState> = () => {
  const sagaMiddleware = createSagaMiddleware()
  const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(sagaMiddleware)))
  sagaMiddleware.run(rootSaga)
  return store
}

export const wrapper = createWrapper < Store.RootState > makeStore

новый файлpages/_app.tsxВвести избыточность для переопределения приложения Next.js по умолчанию

import React, { FC } from 'react'
import { AppProps } from 'next/app'
import { wrapper } from 'src/redux'
import Layout from 'src/components/Layout'

const WrappedApp: FC<AppProps> = ({ Component, pageProps }) => (
  <Layout>
    <Component {...pageProps} />
  </Layout>
)

export default wrapper.withRedux(WrappedApp)

Демонстрации другого кода и примеров см.исходный код

Существует несколько структур проекта для редукса.Какая из них лучше зависит от размера и сложности проекта.Этот скаффолдинг - это только один из видов скаффолдинга.Структура данных редукса разделена по модулям.Это не значит насколько хорош этот метод , Это зависит от проекта Настройте структуру каталогов.

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

Конечно, это всего лишь эталонный метод, вы также можете создать новый в модуле каталога redux.typesразмещение файлаStateОпределение типа.

Поддержка дизайна Ant

yarn add antd
yarn add -D babel-plugin-import

babel.config.js

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'antd',
        libraryDirectory: 'lib',
        style: 'index.css',
      },
    ],
  ],
}

существуетsrc/_app.tsxВведите стиль antd в:

import 'antd/dist/antd.css'

Автоматическое развертывание Travis

По умолчанию это устанавливается первым (добавьте Jest позже, а затем добавьте скриптyarn test). Если вы не понимаете, прочитайте мою статьюПрактическое руководство по началу работы с автоматизированным развертыванием Travis

language: node_js

node_js:
  - "stable"

cache: yarn

install:
  - yarn
script:
  - yarn build

Документация по компонентам сборки сборника рассказов

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

npx -p @storybook/cli sb init

После завершения установки начнется работа

yarn storybook

Затем будут некоторые начальные примеры компонентов, вы можете удалить их, когда увидите.

How to write storiesНаписав истории для компонентов, мы можем дать нам общее представление о компонентах, используемых во всем проекте, например, как они выглядят и т. д., а также меняется ли UI, о чем будет написано ниже.

глобализация

yarn add react-i18next i18next

Конечно, вы также можете использовать его напрямуюnext-i18next

src/i18n/index.ts

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import zhCN from './locales/zh_CN.json'
import enUS from './locales/en_US.json'

i18n.use(initReactI18next).init({
  lng: 'zh_CN',
  fallbackLng: 'zh_CN',
  resources: {
    zh_CN: {
      translation: zhCN,
    },
    en_US: {
      translation: enUS,
    },
  },
  debug: false,
  interpolation: {
    escapeValue: false,
  },
})

export default i18n

В частности, посмотрите непосредственно на код, так много здесь представлено; затем вы можете переключить язык и сконцентрировать некоторые слова и предложения, используемые в проекте, вzh_CN.jsonа такжеen_US.jsonПодождите, чтобы написать.

Шуточные модульные тесты

Для надежности кода, конечно же, добавьте юнит-тесты. Если вы не понимаете, что такое модульное тестирование, сначала прочитайте мою статью.Эта статья поможет вам понять модульное тестирование Jest.

yarn add -D jest @types/jest eslint-plugin-jest babel-jest @storybook/addon-storyshots

настроить.eslintrc.js

module.exports = {
  extends: ['plugin:jest/recommended'],
  plugins: ['jest'],
}

Создайте новый файл в корневом каталогеjest.config.js

module.exports = {
  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
  testPathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/node_modules/', '<rootDir>/.next/'],
  moduleNameMapper: {
    '^src(.*)$': '<rootDir>/src$1',
    '^server(.*)$': '<rootDir>/server$1',
    '^pages(.*)$': '<rootDir>/pages$1',
  },
  collectCoverageFrom: [
    './{src,server}/**/*.{ts,tsx,js,jsx}',
    '!**/node_modules/**',
    '!**/dist/**',
    '!**/coverage/**',
    '!**/*.stories.{ts,tsx,js,jsx}',
    '!**/{config,constants,styles,types,__fixtures__}/**',
  ],
  watchPathIgnorePatterns: ['dist'],
}

Объединение сборника рассказов и снимков Jest

Jest может сгенерировать тест моментального снимка (Snapshot), который может сказать нам, является ли элемент страницы ненормальным, отсутствующим или добавленным, или был ли изменен файл конфигурации посредством изменения моментального снимка. Справочник установлен выше.Если это снапшот реактивного компонента, нужны другие плагины.Здесь мы переходим к тому, чтобы полагаться на генерацию историй из сборника рассказов.

Для реагирования Jest сделает снимок виртуального DOM, преобразует его в данные json и сравнит два снимка на наличие отклонений при следующем запуске.

yarn add -D @storybook/addon-storyshots

Новое в корневом каталогеjest.config.js, Конфигурация моментального снимка следующая, другие конфигурации настраиваются в соответствии с проектом, см.jest.config.js

module.exports = {
  transform: {
    '^.+\\.stories\\.[tj]sx?$': '@storybook/addon-storyshots/injectFileName',
    '^.+\\.[tj]sx?$': 'babel-jest',
  },
}

создать новый файлsrc/__tests__/storyshot.test.ts

import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots'

initStoryshots({
  test: multiSnapshotWithOptions(),
})

После написания компонентаstoriesместо, использованиеyarn jest, помимо запуска тестов, также будет автоматически запускаться*.stories.tsxСравните/создайте снимок.

Для сгенерированного снимка вы увидите

Я например написалFooterДля компонентов есть только теги HTML и соответствующие атрибуты, поэтому обнаружения недостаточно, потому что я не знаю, какие изменения были внесены в атрибуты класса css, потому что схема css, которую я использую,styled-components, поэтому вам нужно настроить его снова:

yarn add -D jest-specific-snapshot jest-styled-components

настроитьsrc/__tests__/storyshot.test.ts

import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots'
import 'jest-styled-components'
import { addSerializer } from 'jest-specific-snapshot'
import styleSheetSerializer from 'jest-styled-components/src/styleSheetSerializer'

addSerializer(styleSheetSerializer)

initStoryshots({
  test: multiSnapshotWithOptions(),
})

Глядя на текущий снимок, уже имеется множество стилей для справки и сравнения, так что можно зафиксировать тонкие модификации стилей компонентов;

Enzyme

Jest может иметь достаточное количество API для тестирования функций, классов и т. д., но для компонентов React, если вы хотите провести подробное тестирование, вам необходимо установить другие плагины для их поддержки, такие какreact-test-libraryа такжеenzyme, здесь я выбираю те, которые я использовал немного большеenzyme(от Airbnb Inc.), и необходимо установить его адаптер.

Здесь, поскольку React был обновлен до версии 17, но официальный адаптер фермента не был обновлен до соответствующей версии 17, некоторые методы тестирования могут сообщать об ошибках, поэтому вместо этого временно используйте текущую версию этой библиотеки, которую Github использует больше.@wojtekmaj/enzyme-adapter-react-17, и дождитесь официального обновления, чтобы заменить его. Это только для тестирования и не повлияет на онлайн-среду.Пока фермент поставляется со всеми методами, которые могут работать должным образом без сообщений об ошибках, мы можем хорошо писать наши тестовые примеры.

yarn add enzyme @wojtekmaj/enzyme-adapter-react-17 -D

Создайте новый файл в корневом каталогеjest.setup.ts

import Enzyme from 'enzyme'
import Adapter from '@wojtekmaj/enzyme-adapter-react-17'

Enzyme.configure({ adapter: new Adapter() })

в то же времяjest.config.jsимпортировать в

module.exports = {
  setupFiles: ['<rootDir>/jest.setup.ts'],
}

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

Сгенерируйте CHANGELOG и автоматизируйте управление версиями

Здесь я используюstandard-version.

yarn add -D standard-version

стандартная версия — это инструмент автоматизации версии и журнала изменений, который следует стандартной спецификации сообщения semver и фиксации.

"bump-version": "standard-version --skip.commit --skip.tag"

бегатьyarn bump-versionПосле этого вы обнаружите, что номер версии package.json изменился (при условии, что у вас есть изменения фиксации, такие как feat или fix), и CAHNGEALOG.md автоматически генерируется, и все это можно настроить и настроить.

Версия с тегами Github

Нажмите, чтобы создать выпуск в правой части страницы проекта Github.

Затем заполните номер версии.Для получения подробной информации, я буду непосредственно перемещать содержимое CHANGELOG.md, а затем нажмитеPublish releaseВот и все.

Улучшить команду скрипта

существуетpackage.jsonсередина

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "commit": "git-cz",
  "test": "jest",
  "coverage": "yarn jest --coverage",
  "lint": "yarn lint:eslint && yarn lint:css",
  "lint:eslint": "eslint --ext js,jsx,ts,tsx .",
  "lint:css": "stylelint **/*.{ts,tsx}",
  "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
  "tsc:client": "tsc --noEmit -p tsconfig.json",
  "storybook": "start-storybook -p 6006",
  "build-storybook": "build-storybook -o ./dist_storybook",
  "bump-version": "standard-version --skip.commit --skip.tag"
},

LICENSE

Добавьте лицензию с открытым исходным кодом, я выбираю свободную лицензию MIT.

MIT License

Copyright (c) 2020 nextjs-ts-redux-antd-starter

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

запустить проект

Вышеупомянутая демонстрация также пропускает некоторые детали и другие конфигурации, вам нужно увидеть ее в деталях.исходный кодБар.

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

Эпилог

Леса здесь? Еще нет, еще много чего не добавлено, например, сортировка конфигурации конфигурации Next.js, оптимизация SEO, публикация на онлайн-сайтах и ​​npm, некоторая совместимость, специальная обработка страниц, отзывчивость и т. д.

Конечно, на момент написания этой статьи строительные леса также были плохо написаны или несовершенны.Поскольку они только начались, строительные леса будут поддерживаться постоянно, а рабочие практики и передовой опыт будут внедряться в проект.Продолжайте обновлять , следите за обновлениями, добро пожаловать, звезда 🌟🌟🌟GitHub.com/Jacky-сум…


Если вы считаете, что это хорошо, дайте мне звезду и дайте мне мотивацию продолжать творить! Продолжить в следующий раз...

Категории