feat(docz-core): add build command

examples/basic/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "dev": "docz dev"
+    "dev": "docz dev",
+    "build": "docz build"
   },
   "dependencies": {
     "docz": "^0.0.1",

packages/docz-core/librc.js

@@ -2,6 +2,11 @@ const copy = require('rollup-plugin-cpy')
 const pkg = require('./package.json')
 
 module.exports = {
+  external: Object.keys(pkg.dependencies).concat([
+    'react-dev-utils/FileSizeReporter',
+    'react-dev-utils/formatWebpackMessages',
+    'react-dev-utils/printBuildError',
+  ]),
   plugins: [
     copy([
       {

packages/docz-core/package.json

@@ -25,12 +25,12 @@
     "@mdx-js/mdx": "^0.9.0",
     "@mdx-js/mdxast": "^0.7.2",
     "@sindresorhus/slugify": "^0.3.0",
-    "@types/shelljs": "^0.8.0",
     "art-template": "^4.12.2",
     "babel-loader": "^8.0.0-beta.3",
     "babel-plugin-react-docgen": "^1.9.0",
     "babel-polyfill": "^7.0.0-beta.3",
     "babel-preset-react-app": "^4.0.0-next.b2fd8db8",
+    "chalk": "^2.4.1",
     "chokidar": "^2.0.3",
     "connect-history-api-fallback": "^1.5.0",
     "deepmerge": "^2.1.0",
@@ -39,6 +39,7 @@
     "fast-glob": "^2.2.2",
     "file-loader": "^1.1.11",
     "friendly-errors-webpack-plugin": "^1.7.0",
+    "fs-extra": "^6.0.1",
     "happypack": "^5.0.0",
     "hast-util-to-string": "^1.0.1",
     "html-webpack-plugin": "^3.2.0",
@@ -48,13 +49,15 @@
     "load-cfg": "^0.0.1",
     "lodash.get": "^4.4.2",
     "prettier": "^1.12.0",
+    "react-dev-utils": "^5.0.1",
     "react-hot-loader": "4.2.0",
     "remark-frontmatter": "^1.2.0",
     "remark-parse": "^5.0.0",
     "remark-parse-yaml": "^0.0.1",
     "resolve": "^1.7.1",
-    "shelljs": "^0.8.2",
+    "signale": "^1.1.0",
     "to-vfile": "^4.0.0",
+    "uglifyjs-webpack-plugin": "^1.2.5",
     "ulid": "^2.3.0",
     "unified": "^7.0.0",
     "unist-util-find": "^1.0.1",
@@ -64,17 +67,20 @@
     "url-loader": "^1.0.1",
     "webpack": "^4.8.3",
     "webpack-chain": "^4.8.0",
+    "webpack-manifest-plugin": "^2.0.3",
     "webpack-serve": "^1.0.2",
     "webpackbar": "^2.6.1",
     "ws": "^5.2.0",
     "yargs": "^11.0.0"
   },
   "devDependencies": {
+    "@types/chalk": "^2.2.0",
     "@types/chokidar": "^1.7.5",
     "@types/connect-history-api-fallback": "^1.3.1",
     "@types/deepmerge": "^2.1.0",
     "@types/del": "^3.0.1",
     "@types/express": "^4.11.1",
+    "@types/fs-extra": "^5.0.2",
     "@types/html-webpack-plugin": "^2.30.3",
     "@types/lodash.get": "^4.4.3",
     "@types/node": "10.1.2",

packages/docz-core/src/DataServer.ts

@@ -57,7 +57,7 @@ export class DataServer {
     this.server.on('connection', handleConnection)
     this.server.on('close', () => watcher.close())
 
-    await Entries.writeApp(config)
+    await Entries.writeApp(config, true)
     await Entries.writeImports(await entries.getMap())
   }
 

packages/docz-core/src/Entries.ts

@@ -1,17 +1,18 @@
+import * as fs from 'fs-extra'
 import * as glob from 'fast-glob'
 import * as path from 'path'
 
 import * as paths from './config/paths'
 import { propOf } from './utils/helpers'
-import { mkd, touch, compiled, readIfExist } from './utils/fs'
+import { touch, compiled, readIfExist } from './utils/fs'
 
 import { Entry, parseMdx } from './Entry'
 import { Config } from './commands/args'
 
 const fromTemplates = (file: string) => path.join(paths.templates, file)
 const fromDocz = (file: string) => path.join(paths.docz, file)
 
-const writeAppFiles = async (config: Config): Promise<void> => {
+const writeAppFiles = async (config: Config, dev: boolean): Promise<void> => {
   const { plugins, title, description, theme } = config
 
   const wrappers = propOf(plugins, 'wrapper')
@@ -27,6 +28,7 @@ const writeAppFiles = async (config: Config): Promise<void> => {
   const rawRootJs = root({
     theme,
     wrappers,
+    isProd: !dev,
     websocketUrl: `ws://${config.websocketHost}:${config.websocketPort}`,
   })
 
@@ -47,21 +49,36 @@ const writeAppFiles = async (config: Config): Promise<void> => {
   await touch(paths.indexHtml, rawIndexHtml)
 }
 
-const writeImports = async (entries: EntryMap): Promise<void> => {
+const writeImports = async (map: EntryMap): Promise<void> => {
   const imports = await compiled(fromTemplates('imports.tpl.js'))
-  await touch(paths.importsJs, imports({ entries: Object.values(entries) }))
+  await touch(paths.importsJs, imports({ entries: Object.values(map) }))
+}
+
+const writeData = async (map: EntryMap, config: Config): Promise<void> => {
+  const configObj = {
+    title: config.title,
+    description: config.description,
+    ...config.themeConfig,
+  }
+
+  await touch(paths.entriesJson, JSON.stringify(map, null, 2))
+  await touch(paths.configJson, JSON.stringify(configObj, null, 2))
 }
 
 export type EntryMap = Record<string, Entry>
 
 export class Entries {
-  public static async writeApp(config: Config): Promise<void> {
-    mkd(paths.app)
-    await writeAppFiles(config)
+  public static async writeApp(config: Config, dev?: boolean): Promise<void> {
+    await fs.ensureDir(paths.app)
+    await writeAppFiles(config, Boolean(dev))
+  }
+
+  public static async writeImports(map: EntryMap): Promise<void> {
+    await writeImports(map)
   }
 
-  public static async writeImports(entries: EntryMap): Promise<void> {
-    await writeImports(entries)
+  public static async writeData(map: EntryMap, config: Config): Promise<void> {
+    await writeData(map, config)
   }
 
   public all: EntryMap

packages/docz-core/src/bundlers/webpack/config.ts

@@ -6,11 +6,14 @@ import Config from 'webpack-chain'
 import HappyPack from 'happypack'
 import friendlyErrors from 'friendly-errors-webpack-plugin'
 import htmlWebpackPlugin from 'html-webpack-plugin'
+import manifestPlugin from 'webpack-manifest-plugin'
+import UglifyJs from 'uglifyjs-webpack-plugin'
 import matter from 'remark-frontmatter'
 
 import { Config as ConfigObj } from '../../commands/args'
 import { plugin as mdastPlugin } from '../../utils/plugin-mdast'
 import { plugin as hastPlugin } from '../../utils/plugin-hast'
+import { Env } from './'
 
 const INLINE_LIMIT = 10000
 
@@ -67,8 +70,8 @@ const setupHappypack = (config: Config, babelrc: any) => {
   config.plugin('happypack-mdx').use(HappyPack, mdx)
 }
 
-export const createConfig = (args: ConfigObj): Config => {
-  const { paths, env, debug } = args
+export const createConfig = (args: ConfigObj, env: Env): Config => {
+  const { paths, debug } = args
 
   const srcPath = path.resolve(paths.root, args.src)
   const isProd = env === 'production'
@@ -78,7 +81,7 @@ export const createConfig = (args: ConfigObj): Config => {
    * general
    */
   config.context(paths.root)
-  config.set('mode', isProd && !debug ? 'production' : 'development')
+  config.set('mode', env)
 
   config.when(debug, cfg => cfg.devtool('source-map'))
   config.when(!isProd, cfg => cfg.devtool('cheap-module-eval-source-map'))
@@ -129,6 +132,38 @@ export const createConfig = (args: ConfigObj): Config => {
     },
   })
 
+  if (isProd) {
+    config.merge({
+      optimization: {
+        minimizer: [
+          new UglifyJs({
+            uglifyOptions: {
+              parse: {
+                ecma: 8,
+              },
+              compress: {
+                ecma: 5,
+                warnings: false,
+                comparisons: false,
+              },
+              mangle: {
+                safari10: true,
+              },
+              output: {
+                ecma: 5,
+                comments: false,
+                ascii_only: true,
+              },
+            },
+            parallel: true,
+            cache: true,
+            sourceMap: true,
+          }),
+        ],
+      },
+    })
+  }
+
   /**
    * entries
    */
@@ -240,14 +275,34 @@ export const createConfig = (args: ConfigObj): Config => {
 
   setupHappypack(config, getBabelRc(args.debug))
 
+  config.plugin('assets-plugin').use(manifestPlugin, [
+    {
+      filename: 'assets.json',
+    },
+  ])
+
   config.plugin('html-webpack-plugin').use(htmlWebpackPlugin, [
     {
       inject: true,
       template: paths.indexHtml,
+      ...(isProd && {
+        minify: {
+          removeComments: true,
+          collapseWhitespace: true,
+          removeRedundantAttributes: true,
+          useShortDoctype: true,
+          removeEmptyAttributes: true,
+          removeStyleLinkTypeAttributes: true,
+          keepClosingSlash: true,
+          minifyJS: true,
+          minifyCSS: true,
+          minifyURLs: true,
+        },
+      }),
     },
   ])
 
-  config.when(!debug, cfg => {
+  config.when(!debug && !isProd, cfg => {
     cfg.plugin('webpackbar').use(webpackBarPlugin, [
       {
         color: '#41b883',
@@ -258,5 +313,6 @@ export const createConfig = (args: ConfigObj): Config => {
     cfg.plugin('friendly-errors').use(friendlyErrors)
   })
 
+  config.performance.hints(false)
   return config
 }

packages/docz-core/src/bundlers/webpack/index.ts

@@ -7,6 +7,8 @@ import { createConfig } from './config'
 import { Bundler, BundlerServer } from '../../Bundler'
 import { Config as Args } from '../../commands/args'
 
+export type Env = 'production' | 'development'
+
 export const server = (args: Args) => async (
   config: CFG
 ): Promise<BundlerServer> => {
@@ -26,8 +28,8 @@ export const server = (args: Args) => async (
   }
 }
 
-export const bundler = (args: Args): Bundler<CFG> => {
-  const config: any = createConfig(args).toConfig()
+export const bundler = (args: Args, env: Env): Bundler<CFG> => {
+  const config: any = createConfig(args, env).toConfig()
 
   return new Bundler({
     args,

packages/docz-core/src/commands/args.ts

@@ -51,10 +51,6 @@ export const args = (yargs: any) => {
     type: 'string',
     default: 'docz-theme-default',
   })
-  yargs.positional('env', {
-    type: 'boolean',
-    default: process.env.NODE_ENV || 'development',
-  })
   yargs.positional('debug', {
     type: 'boolean',
     default: process.env.DEBUG || false,