前言
随着 JavaScript 在 web 开发中的不断普及，前端工程师的职责不再只是编写 HTML、CSS 和 JS 代码，而是走向了构建和维护整个项目的架构和生命周期。这些工作中包括了很多捷径，而其中最大的捷径就是 npm 包。
npm 是 JavaScript 生态系统中最重要的工具之一，提供了大量的功能和库，而在这个过程中，一个好的 CLI 工具也显得尤为重要。
事实上，本文的主角 @qbyco/tjs-cli 就是一个优秀的 CLI 工具，它可以帮助你快速创建一个前端项目的骨架结构，包括了基础目录结构、配置文件和示例代码，同时还提供了一些内置插件，方便开发者使用。
安装
在命令行中运行以下命令来安装 @qbyco/tjs-cli：
npm install -g @qbyco/tjs-cli
这个命令将安装 @qbyco/tjs-cli 包并将其添加到全局 npm 模块中。
命令
创建一个新项目
想要创建新项目，我们需要在命令行中执行下面的命令：
tjs init <project-name>
其中 <project-name> 为你的项目名称。
这个命令将使用模板生成一个项目骨架，并提供基础的目录结构和配置文件。执行命令后，你需要填写一些基础信息，包括项目名称、描述、作者等，然后完成项目初始化。
添加自定义模板
如果你希望为你的项目提供自定义模板，你可以使用下面的命令：
tjs list
这个命令将列出所有可用的模板。 然后你可以使用以下命令来添加自定义模板：
tjs add <template-name> <git-repository-url>
其中 <template-name> 是自定义模板的名称， <git-repository-url> 是该模板的 Git 仓库 URL。
查看 CLI 帮助
如果你需要查看所有可用命令和它们的用法，可以使用以下命令：
tjs --help
这个命令将打印出所有可用命令和它们的用法。
插件
@qbyco/tjs-cli 内置了一些插件，可以帮助开发人员提高开发效率，同时还可以自定义插件以满足个性化需求。
自定义插件
要添加自定义插件，请在项目目录中创建一个名为 tjs-plugin.js 的文件，然后将以下代码添加到文件中：
module.exports = function(api) {
api.hook('before-init', function() {
// 在初始化前执行一些代码
});
api.hook('after-init', function() {
// 在初始化后执行一些代码
});
};这个代码块中， api 参数表示插件注入的 tjs 对象。在这个对象中，可以使用 hook 方法来监听 tjs-cli 的内部事件，以执行插件逻辑。
内置插件
babel
这个插件可以使你的项目支持在浏览器中使用 ES6+ 的语法。在项目初始化后，你需要运行以下命令来安装 babel 插件：
npm install --save-dev @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime
然后，在 tjsconfig.json 文件中添加以下配置：
{
"plugins": [
"babel"
]
}webpack
使用 webpack 插件可以使你的项目支持打包和构建功能，方便构建整个项目。在项目初始化后，你需要运行以下命令来安装 webpack 插件：
npm install --save-dev webpack webpack-cli
然后，在 tjsconfig.json 文件中添加以下配置：
{
"plugins": [
"webpack"
]
}示例代码
下面是一个使用 @qbyco/tjs-cli 创建的基础目录结构：
-- -------------------- ---- ------- --- ------- - --- ---------- - --- ----------- --- ---- - --- ------- - --- ----------- - --- ------ - --- -------- - --- --------- --- -------- --- ---------- --- ------------ --- -----------------
其中， public/ 目录存放公共资源， src/ 目录存放源代码， package.json 文件存放项目的依赖和运行脚本，而 webpack.config.js 文件则是打包构建相关的配置文件。
结论
通过本文我们了解了如何使用 @qbyco/tjs-cli 创建一个前端项目的骨架结构，使用内置插件和自定义插件来提高开发效率，希望本文对你有所启发，能够提升你的项目开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c281e8991b448e31fc