2

kkt-ssr:无需配置即可创建React服务器端渲染工具

小弟调调 2018-12-09 发布于前端 github.com

快速创建 react 服务端渲染项目,拥有数十个示例,开箱即用。

kkt-ssr:无需配置即可创建React服务器端渲染工具

2018-12-09 发布,来源:github.com

kkt-ssr

Create React server-side rendering universal JavaScript applications with no configuration.

Usage

You will need Node.js installed on your system.

Quick Start

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

You can also initialize a project from one of the examples. Example from jaywcjlove/kkt-ssr example-path.

npx create-kkt-app my-app -e reach-router-loadable

development

Runs the project in development mode.

npm run start

production

Builds the app for production to the build folder.

npm run build

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

# Runs the compiled app in production.
npm run server

Using Plugins

You can use KKT plugins by installing in your project and adding them to your .kktrc.js. See the README.md of the specific plugin, Just like the following:

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

See All Plugins

Writing Plugins

Plugins are simply functions that modify and return KKT's webpack config.

module.exports = (conf, { target, dev, env, ...other }, webpack) => {
  // client only
  if (target === 'web') {}
  // server only
  if (target === 'node') {}

  if (dev) {
    // dev only
  } else {
    // prod only
  }
  // conf: Webpack config
  return conf;
}

CSS Modules

KKT supports CSS Modules using Webpack's css-loader. Simply import your CSS file with the extension .module.css and will process the file using css-loader.

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

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

export default Component;

Use Less

Install the less plugin.

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

Modify the .kktrc.js config and add plugins.

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

Use @kkt/plugin-less support Less.

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

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

export default Component;

KKT Config

The root directory creates the .kktrc.js file.

module.exports = {
  // Using plugins
  plugins: [],
  // Modify the babel config
  babel: (conf, option) => {
    return conf;
  },
  // Modify the webpack config
  config: (conf, { target, dev, env, ...otherOptions }, webpack) => {
    return conf;
  }
};

Example

A complete react + react-router + rematch(redux) example is recommended for production projects.

License

MIT © Kenny Wong

443 浏览 5 收藏 报告 阅读模式
xiamidaxia · 2018-12-12

很喜欢你的东东,考虑来阿里吗:https://www.v2ex.com/t/516958...,一起来共建更多有意思的产品

回复

0

谢谢,没有兴趣🙏

小弟调调 分享者 · 2018-12-12
载入中...