什么是 generator-wp-2-tsc？
generator-wp-2-tsc 是一个 npm 包，用于生成 TypeScript 支持的 WordPress 主题模板。该模板包含了必要的文件和目录结构，可以直接开始开发。使用 generator-wp-2-tsc 可以大大提高 WordPress 主题开发的效率和质量。
generator-wp-2-tsc 的安装和使用
安装
首先，确保已经安装了 Node.js 和 npm，可以在命令行中输入以下命令检查：
node -v npm -v
全局安装 generator-wp-2-tsc：
npm install -g generator-wp-2-tsc
使用
在命令行中进入 WordPress 主题目录：
cd path/to/wordpress/wp-content/themes
运行 generator-wp-2-tsc：
yo wp-2-tsc
该命令会提示输入主题名称、主题描述、作者等信息，根据提示输入即可。
generator-wp-2-tsc 会自动创建主题目录并生成必要的文件和目录结构，如下所示：
-- -------------------- ---- ------- --- ----- - --- ---- - - --- -------- - --- --- - - --- ----------- - --- ---------- --- ------------- --- ---- - --- ---- - - --- --------- - --- --- - - --- -------- - - --- ------- - - --- ------ - --- --------- --- ---------- --- ----------------- --- ------------ --- ---------
其中，dist 目录用于存放编译后的文件，src 目录用于存放源代码。main.ts 是主入口文件，main.scss 是样式入口文件。
在 src/css/main.scss 中编写样式，src/js/main.ts 中编写 JavaScript 或 TypeScript。
在命令行中运行以下命令，即可开始开发模式：
npm start
开发模式会自动编译代码，生成 dist 目录，并监听文件变化，一旦有变化即重新编译代码。
当开发完成之后，运行以下命令，即可生成代码的最终版本：
npm run build
该命令会自动将 src/css/main.scss 编译为 dist/css/main.css，src/js/main.ts 编译为 dist/js/main.min.js。
示例代码
在 src/js/main.ts 中编写以下代码：
-- -------------------- ---- -------
------ - ---- ---------
----- ----- -
-------------------- ------- -
----------------------------------------
-
-
----- ----- - --- ------------- ----------------------在 src/css/main.scss 中编写以下代码：
$primary-color: blue;
h1 {
color: $primary-color;
}运行 npm start，在浏览器中打开 dist/index.html，即可看到效果。
结语
generator-wp-2-tsc 是一个非常实用的 npm 包，可以帮助开发者快速生成并开发 WordPress 主题。掌握 generator-wp-2-tsc 的使用方法，可以提高开发效率和代码质量。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5881e8991b448e5da5