最近项目中需要搭建一个多页面的环境,包括本地路由服务和分页面打包。 本节实现单个页面或是完整页面的打包过程的过程。

# npm 模块

打包页面需要用到一些 npm 模块(需单独安装),这里我们简单介绍一下。

# ora模块 (opens new window)

主要用来实现node.js命令行环境的 loading 效果,和显示各种状态的图标等。

const ora = require("ora");
// 开始显示
const spinner = ora("Loading unicorns").start();

setTimeout(() => {
  // 一秒后设置颜色和内容
  spinner.color = "yellow";
  spinner.text = "Loading rainbows";
}, 1000);

更多的选项,大家到官方说明 (opens new window)上面看吧。

# rimraf模块 (opens new window)

实现node.js环境的 UNIX 命令rm -rf

rimraf(f, [opts], callback);
  • f,可为glob匹配规则的文件
  • [opts],一些选项,具体可参考官方说明 (opens new window)
  • callback,若执行过程中出错,则回调参数为error

如果大家用过shalljs,这是一个node.js环境的Unix shell命令,里面当然已经包括rm命令了。

# chalk模块 (opens new window)

命令行输出各种样式的字符串。

  • 使用方式

chalk.<style>[.<style>...](string, [string...])

// 例如,红色带下划线的粗体字
chalk.red.bold.underline("Hello", "world");

# node.js 模块

介绍将使用到的 node.js 自带 API 和内置模块(无需安装)。

# path模块 (opens new window)

path模块提供了一些工具函数,用于处理文件与目录的路径。这是node.js一个自带的模块。

path模块的默认操作会根据Node.js应用程序运行的操作系统的不同而变化。比如,当运行在Windows操作系统上时,path模块会认为使用的是Windows风格的路径。

  • path.join([...paths])

使用平台特定的分隔符把全部给定的path片段连接到一起,并规范化生成的路径。 这个大概是我们写 webpack 配置的时候,最常用的一个方法啦,像path.join(__dirname, 'src')

  • path.parse(path)

返回一个对象,对象的属性表示path的元素。返回属性包括:dir, root, base, name, ext

  • path.format(pathObject)

会从一个对象返回一个路径字符串,与path.parse()相反。

  • path.dirname(path)

返回一个path的目录名,类似于Unix中的dirname命令。

# process模块 (opens new window)

process对象是一个global(全局变量),提供有关信息,控制当前Node.js进程。 作为一个对象,它对于Node.js应用程序始终是可用的,故无需使用require()

  • process.execPath

返回启动Node.js进程的可执行文件所在的绝对路径。

  • process.argv

process.argv属性返回一个数组,这个数组包含了启动Node.js进程时的命令行参数。第一个元素为process.execPath。 如果需要获取argv[0]的值请参见process.argv0。第二个元素为当前执行的 JavaScript 文件路径,剩余的元素为其他命令行参数。

// 运行以下命令,启动进程:
$ node process-args.js one two=three four

// 将输出:
0: /usr/local/bin/node
1: /Users/mjr/work/node/process-args.js
2: one
3: two=three
4: four
  • process.env

process.env属性返回一个包含用户环境信息的对象。 像我们经常看到生产环境process.env.NODE_ENV = 'production'和开发环境process.env.NODE_ENV = 'dev'

  • 输入流process.stdin和输出流process.stdout

process还有更多的进程管理相关的方法和参数,大家可以参考官方说明 (opens new window)

# 结束语

本节主要介绍了后面打包页面时会使用到的一些 node.js 内置和依赖模块,包括终端输出样式、命令、pathprocess等。后面一节也会用到来进行页面的打包。
可参考代码github-vue-multi-pages (opens new window),主要是这套环境使用在 vue 上的 demo。

部分文章中使用了一些网站的截图,如果涉及侵权,请告诉我删一下谢谢~
温馨提示喵