开源笔记：动手写静态网页开发框架 - 其二

我希望在整个项目的开发过程中完全使用 TypeScript 来帮助进行类型提示和生成类型定义文件，所以我选择使用 microbundle 来作为构建工具。首先安装 microbundle 的依赖项：

yarn add -D microbundle

然后修改 package.json，microbundle 会根据其中相关配置进行构建，修改的部分如下：

{
  "source": "src/index.ts",
  "main": "dist/index.js",
  "umd:main": "dist/index.umd.js",
  "scripts": {
    "build": "microbundle",
    "dev": "microbundle watch"
  }
}

其意为使用 src/index.ts 作为源文件，构建生成 commonjs 格式的 dist/index.js 模块文件作为包的入口，并同时生成 umd 格式的 dist/index.umd.js 模块文件放在一起备用。

参考 poi 的命令行参数和配置文件，我们首先编写 cli 命令行工具能够接受的参数：

src/config.ts

import postHtml from 'posthtml'

export interface Config {
  input?: {
    /** The directory to page files. */
    pages?: string
    /** The directory to component files. */
    components?: string
    /** The directory to layout files. */
    layouts?: string
  }
  output?: {
    /** The directory to output files. */
    dir?: string
    /** Clean output directory before building. */
    clean?: boolean
    /** Specify the output format. */
    format?: 'minimize' | 'beautify' | 'original'
  },
  devServer?: {
    /** Server host. */
    host?: string,
    /** Server port. */
    port?: string | number
    /** Open the dev server in your browser when building succeeded. */
    open?: boolean
  }
  /** Configure options for postHtml. */
  postHtmlPlugins?: postHtml.Plugin<unknown>[]
}

然后编写一个函数用于生成默认配置：

export const defaultConfig = () => ({
  input: {
    pages: 'src/pages',
    components: 'src/components',
    layouts: 'src/layouts'
  },
  output: {
    dir: 'dist',
    clean: true,
    format: 'beautify'
  },
  devServer: {
    host: '0.0.0.0',
    port: '4000',
    open: true
  },
  postHtmlPlugins: []
} as Config)

以及一个函数用于从不同路径读取配置文件：

/**
 * Newx will search newx.config.{ts,js} .newxrc.json
 * or newx property in package.json from your project. 
 */
export const readConfig = () => {
  const configContents: Config[] = [];
  ['newx.config.ts', 'newx.config.js', '.newxrc.json', '.newxrc'].forEach(filename => {
    try {
      if (statSync('newx.config.ts').isFile()) {
        configContents.push(require('./newx.config.ts'))
      }
    } catch (e) {}
  })
  return Object.assign(defaultConfig(), ...configContents)
}

完成定义之后我们使用 cac 库编写命令行的框架：

import { cac } from 'cac'

const cli = cac('newx')

cli.command('build', 'Build files.')
  .action((options) => {
    console.log('build: ', options)
  })

cli.command('dev', 'Watch files and running dev-server.')
  .option('-h, --host <host>', 'Server host.')
  .option('-p, --port <port>', 'Server port.')
  .option('--open', 'Open the dev server in your browser when building succeeded.')
  .action((options) => {
    console.log('dev: ', options)
  })

cli
  .option('--pages <path>', 'The directory to page files.')
  .option('--components <path>', 'The directory to page files.')
  .option('--layouts <path>', 'The directory to layout files.')
  .option('--dir <path>', 'The directory to output files.')
  .option('--clean', 'Disable clean output directory before building.')
  .option('-f, --format <type>', 'Specify the output format.')

cli.help()

cli.parse()

运行 yarn dev -f cjs src/cli.ts 来让 microbundle 监控并编译源文件，这时就可以通过路径执行命令行程序：

➜  node .\dist\cli.js dev -p 8080     
dev:  { '--': [], p: 8080, port: 8080 }
➜  node .\dist\cli.js build -f beautify --clean false
build:  { '--': [], f: 'beautify', clean: false, format: 'beautify' }

命令行的框架已经搭建完成，现在就可以正式开始开发了。