大纲：

• 搭建一个基础的cli 环境，typescript
• 优化cli 提示+各种命令行工具
• 设置模板

通过本文，你可以学会：

先让代码能跑起来

创建自定义指令

像vue3脚手架，我们直接执行create-vue就可以生成项目，是怎么实现的呢？

基本原理就像我们在windows系统里设置path环境变量一样

新建一个npm 项目，npm init，在package.json中添加：

{
	"bin":{
    "cesium-vue-cli": "cli.js"
}

这个bin字段用于配置可执行文件，其中key为指令名，value为可执行文件位置。当全局安装这个包时，这个bin可以注册到环境变量中，从而在命令行中执行。

创建一个可执行文件：

#! /usr/bin/env node

console.log('init cli')

然后执行npm link，就可以使用自定义指令了：cesium-vue-cli

引入inquire，配置询问式的交互

inquire.js的定位是为node.js实现可嵌入的命令行界面。

引入inquire.js:

npm install -s inquire.js

实现一个简单的输入项目名的交互：

inquirer.prompt([
  {
    type: 'input',
    name: 'projectName',
    message: 'projectName',
    default: 'my-node-cli',
    validate: (val) => {
      if (!val) {
        return 'please enter projectName'
      }
      return true
    }
  }
]).then(answers => {
  //
})

重新执行自定义指令，就可以看到提示

引入模版引擎ejs

前边我们实现了问询式交互，那么如何获取交互的结果，并根据结果动态生成项目模版。可以使用模版引擎，较常用的是ejs。

使用inquire

使用ejs

其他的一些工具

引入cesium

关于在构建工具vite（webpack）中引入 cesium

网上有很多关于Cesium与这些前端构建工具如何结合的文章，之前只是直接使用，不了解原理，这次自己去尝试了一下，发现其实很简单，核心就是解决以下两个问题：

• CESIUM_BASE_URL：cesium构建后的文件有一些静态资源文件（jpg、json）等，而cesium内部加载这些静态资源文件时，会根据windows下的CESIUM_BASE_URL来拼接，比如我们cesium是在node_modules下的，这个CESIUM_BASE_URL就填写node_modules/cesium/build/cesium，
• cesium打包： 由于以下原因，我们通常直接拷贝cesium源文件到public目录下（或用cdn引入），而不直接进行打包。
  • 由于cesium源码中引入静态文件是通过相对路径的，而打包工具在打包时，无法分析出静态文件的依赖关系，打包后的产物可能不包括某些静态文件
  • cesium构件好的源文件比较大，如果发布时再用vite、webapck等构件工具再打包一遍，也比较耗时，