Создайте универсальные приложения JavaScript с серверным рендерингом React без конфигурации.

Если вам не нужен серверный рендеринг, вы можете использовать инструменты kkt.

Быстрое начало работы

Вам потребуется установить на вашей системе Node.js.

Быстрое начало:

npx create-kkt-app my-app
cd my-app
npm start

Вы также можете инициализировать проект на одном из примеров. Пример из kktjs/kkt-ssr (пример пути).

# Используя метод шаблона
# `npx create-kkt-app my-app [-e пример имени]`
npx create-kkt-app my-app -e react-router+rematch

или

npm install -g create-kkt-app
# Создайте проект, используя метод шаблона
create-kkt-app my-app -e react-router+rematch
cd my-app # Войдите в каталог
npm start # Запустите сервис

⚠️ Рекомендуется идеальный пример react-router + rematch для производственных сред. Этот пример похож на Next.js.

Разработка

Запускает проект в режиме разработки.

npm run start

Производство

Создаёт приложение для производства в папке сборки.

npm run build

Сборка минимизирована, а имена файлов включают хэши. Ваше приложение готово к развёртыванию!

# Запускает скомпилированное приложение в производстве.
npm run server

Включите инспектор

npm start -- --inspect
# или
yarn start -- --inspect

Чтобы отладить сервер узла, вы можете использовать react-ssr start --inspect. Это запустит сервер узла и включит агент инспектора. Для получения дополнительной информации см. здесь.

npm start -- --inspect-brk
# или
yarn start -- --inspect-brk

Чтобы отладить сервер узла, вы можете использовать react-ssr start --inspect-brk. Это запустит сервер узла, включит агент инспектора и прервёт работу перед запуском пользовательского кода. Для получения дополнительной информации см. здесь.

Использование плагинов

Вы можете использовать плагины KKT, установив их в свой проект и добавив их в свой .kktrc.js. Смотрите README.md конкретного плагина, как показано ниже:

npm install kkt-plugin-xxxx

module.exports = {
  plugins: [
    require.resolve('kkt-plugin-xxxx'),
  ],
};

См. все плагины

Написание плагинов

Плагины — это просто функции, которые изменяют и возвращают конфигурацию веб-пакета KKT.

module.exports = (conf, { target, dev, env, ...other }, webpack) => {
  // клиент только
  if (target === 'web') {}
  // сервер только
  if (target === 'node') {}

  if (dev) {
    // dev только
  } else {
    // prod только
  }
  // conf: конфигурация веб-пакета
  return conf;
}

CSS Модули

KKT поддерживает CSS Modules с помощью Webpack's css-loader. Просто импортируйте ваш CSS файл с расширением .module.css и он будет обработан с помощью css-loader.

import React from 'react';
import styles from './style.module.css';

const Component = () => <div className={styles.className} />;

export default Component;

Используйте Less

Установите плагин Less.

npm install @kkt/plugin-less --save-dev

Измените конфигурацию .kktrc.js и добавьте плагины.

module.exports = {
  plugins: [
    require.resolve('@kkt/plugin-less'),
  ],
};

Используйте поддержку Less с помощью @kkt/plugin-less.

import React from 'react';
import styles from './style.module.less';

const Component = () => <div className={styles.className} />;

export default Component;

Конфигурация KKT

В корневом каталоге создайте файл .kktrc.js.

module.exports = {
  // Использование плагинов
  plugins: [],
  // Изменение конфигурации babel
  babel: (conf, option) => {
    return conf;
  },
  // Изменение конфигурации webpack
  config: (conf, { target, dev, env, ...otherOptions }, webpack) => {
    return conf;
  }
};

Пример

Полный пример react + react-router + rematch(redux) рекомендуется для производственных проектов, похожих на next.js. Инициализируйте проект из одного из примеров:

npx create-kkt-app my-app -e react-router+rematch

• basic — рендеринг на стороне сервера базового приложения на основе react;
• dynamic-loadable — react-loadable для рендеринга на стороне сервера вашего приложения на основе react;
• less — Less для рендеринга на стороне сервера приложения на основе react;
• mock-api — рендеринг на стороне сервера mock api базового приложения на основе react;
• reach-router + loadable-components — reach-router loadable-components для рендеринга на стороне сервера;
• react-router — рендеринг на стороне сервера на основе react-router;
• react-router + loadable-components — loadable-components для рендеринга на стороне сервера;
• react-router + rematch + loadable-component — loadable-components для рендеринга на стороне сервера;
• react-router+rematch — этот пример сложный, похожий на next.js;
• scss — рендеринг на стороне сервера на основе sass;
• styled-components — рендеринг на стороне сервера на основе styled-components;
• stylus — рендеринг на стороне сервера на основе stylus;
• unstated — рендеринг на стороне сервера на основе unstated.

Лицензия

MIT © Kenny Wong