常用的 node 命令行工具

- · -

1. 项目脚手架

使用脚手架可以快速创建一个项目，而不需要手动创建项目结构，这样可以节省很多时间。

脚手架命令包在的包一般以 create- 开头，可以使用 npm、pnpm、yarn 的 create 命令直接使用。比如下面的 create-tauri-app 可以直接使用 pnpm create tauri-app 来执行。

1.1 create-react-app

React 项目的官方脚手架，可以快速创建一个 React 项目。

# 使用 npx
npx create-react-app my-app

# 使用 npm
npm init react-app my-app
# create 是 init 的别名
npm create react-app my-app

# 使用 yarn
yarn create react-app my-app

# 使用 pnpm
pnpm create react-app my-app

还可以使用 --template 参数来指定模板，比如 --template typescript 来创建一个 TypeScript 项目。

npm create react-app my-app --template typescript

1.2 create-vue

Vue 项目的官方脚手架，可以快速创建一个 Vue 项目。执行 npm create vue 后会让输入或选择项目信息，如下图所示：

create-vue 用法

上面所有 Yes / No 相关的问题的默认值都是 No 可以使用直接按回车使用默认值。如果不想使用默认值，可以使用方向键选择 Yes 或 No，然后按回车确认。

Project name：项目名称，直接输入项目名称即可，直接回车使用默认值
Add Typescript? (No / Yes)：是否添加 TypeScript 支持
Add JSX Support? (No / Yes)：是否添加 JSX 支持
Add Vue Router for Single Page Application development? (No / Yes)：是否添加 Vue Router 支持
Add Pinia for state management? (No / Yes)：是否添加 Pinia 支持
Add Vitest for unit testing? (No / Yes)：是否添加 Vitest 支持
Add an End-to-End Testing solution? (No / Yes)：是否添加 E2E 测试支持
Add ESLint for code quality? (No / Yes)：是否添加 ESLint 支持
add Pretter for code formatting? (No / Yes)：是否添加 Pretter 支持

1.3 create-expo-app

Expo 是一个 React Native 的开发工具，可以快速创建一个 React Native 项目。

npm create expo-app MyApp

1.4 create-tauri-app

Tauri 是一个用 Rust 和 Web 技术构建跨平台桌面应用的工具，可以快速创建一个 Tauri 项目。

# 创建一个名为 my-app 的项目
npm create tauri-app my-app

# 指定模板为 react-ts
npm create tauri-app my-app --template react-ts

# 指定使用 pnpm 做为包管理工具
npm create tauri-app my-app --manager pnpm

使用 npx create-tauri-app --help 可以查看更多用法。

2. 网络工具

脚手架工具可以帮助我们快速创建一个项目，而网络工具可以帮助我们快速启动一个 HTTP 服务器，或者抓取 HTTP 请求和响应。

2.1 http-server

http-server 是一个简单的零配置命令行 HTTP 服务器，可以快速启动一个 HTTP 服务器。

# 在当前目录启动一个 HTTP 服务器
http-server

# 在指定目录启动一个 HTTP 服务器
http-server ./public

# 指定监听的端口
http-server -p 8080

# 指定监听的 IP
http-server -a 192.168.8.3
# 监听所有ip
http-server -a 0.0.0.0

# 启用跨域
http-server --cors

2.2 serve

serve 和 http-server 类似，也是一个简单的零配置命令行 HTTP 服务器，可以快速启动一个 HTTP 服务器。

# 在当前目录启动一个 HTTP 服务器
serve

# 在指定目录启动一个 HTTP 服务器
serve ./public

# 指定监听的地址
serve -l tcp://0.0.0.0:8080

2.3 whistle

whistle 是一个跨平台的抓包工具，可以用来抓取 HTTP 请求和响应，还可以修改请求和响应。

# 启动 whistle，默认监听 8899 端口
whistle start

# 启动 whistle 并指定监听的端口
whistle start -p 8080

启动后，会提示打开管理界面的链接

whistle 管理界面

在浏览器中可以打开管理界面。

whistle 管理界面

具体用法请参考 whistle 文档。

3. 编译器

编译器可以将一种语言编译成另一种语言，比如将 TypeScript 编译成 JavaScript，将 Sass 编译成 CSS。

3.1 typescript

我们在这里不再赘述，可以参考 TypeScript 教程。

3.2 sass

Sass 是一种 CSS 预处理器，可以将 Sass 编译成 CSS。

# 编译单个文件
sass input.scss output.css

# 监听文件变化并编译
sass --watch input.scss output.css

比如下面的 Sass 代码：

$color-primary: #123456;
$color-background: #fefefe;
$border-radius: 6px;

body {
  background-color: $color-background;
  color: $color-primary;
}

.card{
    border-radius: $border-radius;
    &-title{
        font-size: 14px;
        font-weight: bold;
        padding: 10px;
    }
    &-body{
        padding: 10px;
        box-sizing: border-box;
    }
    &-footer{
        padding: 10px;
        border-top: thin solid #ccc;
    }
}

编译后的 CSS 代码：

body {
  background-color: #fefefe;
  color: #123456;
}

.card {
  border-radius: 6px;
}

.card-title {
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
}

.card-body {
  padding: 10px;
  box-sizing: border-box;
}

.card-footer {
  padding: 10px;
  border-top: thin solid #ccc;
}

3.3 less

Less 是一种 CSS 预处理器，可以将 Less 编译成 CSS。

lessc input.less output.css

比如下面的 Less 代码，编译后的结果和上面的 sass 代码编译后的结果是一样的。

@color-primary: #123456;
@color-background: #fefefe;
@border-radius: 6px;

body {
  background-color: @color-background;
  color: @color-primary;
}

.card {
  border-radius: @border-radius;
  &-title {
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
  }
  &-body {
    padding: 10px;
    box-sizing: border-box;
  }
  &-footer {
    padding: 10px;
    border-top: thin solid #ccc;
  }
}

3.5 uglify-js

UglifyJS 是一个 JavaScript 压缩工具，可以将 JavaScript 压缩成更小的体积。

uglifyjs input.js -o output.js

比如下面的 JavaScript 代码是何方的个人小站的配置文件的代码：

/* eslint-disable */
const themeConfig = require("./src/configs/themeConfig");
const classicPresetsConfig = require("./src/configs/classicPresetsConfig");
const i18nConfig = require("./src/configs/i18nConfig");
const pwaConfig = require("./src/configs/pwaConfig");
const blogConfig = require("./src/configs/blogConfig");
const docConfig = require("./src/configs/docConfig");
const webpackRawLoader = require("./src/configs/plugins/raw-loadeer/src/index");
/* eslint-enable */

/** @type {import("@docusaurus/types").Config} */
const config = {
  title: "何方的个人小站",
  tagline: "分享学习 · 记录生活",
  url: "https://iamhefang.cn",
  baseUrl: "/",
  onBrokenLinks: "throw",
  onBrokenMarkdownLinks: "warn",
  favicon: "/favicon.svg",
  organizationName: "iamhefang", // Usually your GitHub org/user name.
  projectName: "hefang-blog", // Usually your repo name.
  presets: [classicPresetsConfig],
  themeConfig: themeConfig,
  themes: ["@docusaurus/theme-live-codeblock", "@docusaurus/theme-mermaid"],
  plugins: [
    "docusaurus-plugin-sass",
    pwaConfig,
    ...blogConfig,
    ...docConfig,
    webpackRawLoader,
  ],
  i18n: i18nConfig,
  stylesheets: [
    {
      href: "//cdn.hefang.link/resources/katex/0.13.24/katex.min.css",
      type: "text/css",
    },
    {
      href: "//cdn.hefang.link/resources/gitalk/1.7.2/gitalk.min.css",
      type: "text/css",
    },
    // {href: "//at.alicdn.com/t/font_2203831_dywa51h609g.css", type: "text/css"},
    {
      href: "https://iamhefang-1310356775.cos.ap-chengdu.myqcloud.com/iconfont/iconfont.css",
      type: "text/css",
    },
  ],
  scripts: [
    {
      src: "https://iamhefang-1310356775.cos.ap-chengdu.myqcloud.com/libs/lodash/1.8.3/lodash.min.js",
    },
    {
      src: "https://iamhefang-1310356775.cos.ap-chengdu.myqcloud.com/libs/raphael/2.3.0/raphael.min.js",
    },
    { src: "https://hm.baidu.com/hm.js?2a323d75f92c9fcf958094dcbbdb9425" },
    { src: "/js.js" },
  ],
  markdown: {
    mermaid: true,
  },
};

module.exports = config;

压缩后的代码会去除所有的注释和空格，变成一行代码：

const themeConfig = require("./src/configs/themeConfig");
const classicPresetsConfig = require("./src/configs/classicPresetsConfig");
const i18nConfig = require("./src/configs/i18nConfig");
const pwaConfig = require("./src/configs/pwaConfig");
const blogConfig = require("./src/configs/blogConfig");
const docConfig = require("./src/configs/docConfig");
const webpackRawLoader = require("./src/configs/plugins/raw-loadeer/src/index");
const config = {
  title: "何方的个人小站",
  tagline: "分享学习 · 记录生活",
  url: "https://iamhefang.cn",
  baseUrl: "/",
  onBrokenLinks: "throw",
  onBrokenMarkdownLinks: "warn",
  favicon: "/favicon.svg",
  organizationName: "iamhefang",
  projectName: "hefang-blog",
  presets: [classicPresetsConfig],
  themeConfig: themeConfig,
  themes: ["@docusaurus/theme-live-codeblock", "@docusaurus/theme-mermaid"],
  plugins: [
    "docusaurus-plugin-sass",
    pwaConfig,
    ...blogConfig,
    ...docConfig,
    webpackRawLoader,
  ],
  i18n: i18nConfig,
  stylesheets: [
    {
      href: "//cdn.hefang.link/resources/katex/0.13.24/katex.min.css",
      type: "text/css",
    },
    {
      href: "//cdn.hefang.link/resources/gitalk/1.7.2/gitalk.min.css",
      type: "text/css",
    },
    {
      href: "https://iamhefang-1310356775.cos.ap-chengdu.myqcloud.com/iconfont/iconfont.css",
      type: "text/css",
    },
  ],
  scripts: [
    {
      src: "https://iamhefang-1310356775.cos.ap-chengdu.myqcloud.com/libs/lodash/1.8.3/lodash.min.js",
    },
    {
      src: "https://iamhefang-1310356775.cos.ap-chengdu.myqcloud.com/libs/raphael/2.3.0/raphael.min.js",
    },
    { src: "https://hm.baidu.com/hm.js?2a323d75f92c9fcf958094dcbbdb9425" },
    { src: "/js.js" },
  ],
  markdown: { mermaid: true },
};
module.exports = config;

3.6 babel

Babel 是一个 JavaScript 编译器，可以将新版本的 JavaScript 编译成旧版本的 JavaScript。

npx babel script.js --out-file script-compiled.js

更多用法请参考 Babel 文档。

该内容为何方原创，转载请注明本页地址

https://iamhefang.cn/tutorials/nodejs/cli-tools

1. 项目脚手架​

1.1 create-react-app​

1.2 create-vue​

1.3 create-expo-app​

1.4 create-tauri-app​

2. 网络工具​

2.1 http-server​

2.2 serve​

2.3 whistle​

3. 编译器​

3.1 typescript​

3.2 sass​

3.3 less​

3.5 uglify-js​

3.6 babel​