本文主要讲解关于什么,你连一个Node.js脚本都不会写!!!相关内容,让我们来一起学习下吧!
大家好,我是前端大骆,又来分享一些工作中遇到的事,如果我的经历对您有所帮助,请点个赞收个藏支持一下,关注我不迷路。
没有一个会的
在晨会上,我要求我的团队成员小林编写一个 Node.js 脚本,自动化地将组件库 components
文件夹中的组件按以下格式在根目录的index.ts
文件中导出:
export { default as BasicTable } from './BasicTable';
他有些为难地看着我说:“这个Node.js没学过,不会,要不要让其他人做?”
我扫视了一圈,没有得到回应,于是我一个一个点名,结果没有一个人表示能够完成,都说不熟悉Node.js。我感到困惑,毕竟他们作为有五六年前端经验的团队成员,连一个简单的 Node.js 脚本都不会写!
不要过度神秘化 Node.js 脚本
有些人可能会误解 Node.js 脚本,认为它是用 Node.js 编写的。他们可能会觉得如果不懂 Node.js 的语法就无法编写 Node.js 脚本,感觉会写 Node.js 脚本就很神秘。实际上,Node.js 脚本只是在 Node.js 环境中运行的 JavaScript 脚本而已。
Node.js是一个基于Chrome V8引擎的JavaScript运行时环境,使得您可以在服务器端运行JavaScript代码。
在Node.js环境中,您可以编写JavaScript脚本来执行各种任务,比如文件操作、网络通信、数据处理等。这些脚本可以被称为Node.js脚本,因为它们是在Node.js环境中运行的JavaScript代码,仅此而已,没有什么神秘的。
在前端工程中,Node.js 脚本最常用于文件操作,比如读取、写入、删除、新建文件等等操作。
如何运行Node.js脚本
非常简单,只要你的电脑中有装 Node.js,随便找个地方创建一个 index.js
文件,然后在文件中写入以下代码:
console.log('我是一个Node.js脚本');
接着,打开命令行工具,并进入该文件所在的目录。最后,在命令行中输入 node ./index.js
并按下回车键。你将会在命令行工具中看到输出 我是一个Node.js脚本
。
如果你想将这个 Node.js 脚本作为 npm 脚本运行,可以将其添加到 package.json
文件中的 scripts
部分。假设你的脚本文件相对于 package.json
的路径是 ./scripts/index.js
,你可以添加以下内容到 package.json
的 scripts
部分:
"scripts": {
"my-script": "node ./scripts/index.js"
}
这样,你就创建了一个名为 my-script
的自定义脚本,可以通过在命令行中输入 npm run my-script
来运行你的 Node.js 脚本。
如何引入第三方Node.js包
要实现晨会中所说的功能,首先得对工程中的文件进行操作,虽然可以直接使用 Node.js 内置的 fs
模块来实现,但是为了避免处理文件操作时出现的常见错误和边界情况,同时确保跨平台兼容性。还是选择 fs-extra
这个第三方 Node.js 包来进行文件操作,那我们该如何引入呢?
首先要看 Node.js 的版本,在 12 版本之前,只支持 require()
函数来引入。在 12 版本之后,就可以使用 ES6 的 import
语法来引入。但需要在 package.json
文件中设置 "type": "module"
。如果这样设置不方便,还可以将 Node.js 脚本的后缀改为 .mjs
。
我的 Node.js 版本是 16.14,所以采用 ES6 的 import
语法来引入。
首先,在组件工程的根目录下创建一个名为scripts
的文件夹,并在其中创建一个名为autoExport.mjs
的文件。
接着,在工程的package.json
文件中的scripts
部分添加以下内容:
"scripts": {
"export": "node ./scripts/autoExport.mjs"
}
在 autoExport.mjs
文件中添加如下代码,引入 fs-extra
这个第三方 Node.js 包。
import fs from 'fs-extra';
实现晨会上的功能
要实现晨会上的功能非常简单,只需要利用 fs-extra
中 readdir
和 writeFile
这个两个方法就可以实现。
-
readdir
:读取目录下的文件名和文件夹名称。 -
writeFile
:往文件中写入内容。
import fs from 'fs-extra';
fs.readdir('./src/components')
.then(res => {
if (Array.isArray(res)) {
let exportStr = '';
res.forEach(item => {
exportStr = `${exportStr}n export { default as ${item} } from './components/${item}';`;
});
fs.writeFile('./src/index.export.ts', exportStr);
}
})
.catch(
err => console.error(err)
);
当然以上的代码,太过理想化了,要增加对components
文件夹中的文件和文件夹名称的检查。只有符合大驼峰命名规范且包含 index.tsx
文件的文件夹才会被添加到导出文件中。这样可以确保只有符合要求的组件会被导出,避免处理不符合要求的文件夹。
所以还要用 fs-extra
中 lstatSync
和 existsSync
这个两个方法来实现优化。
-
lstatSync
:用于获取文件或文件夹的状态信息,包括文件类型、大小、权限等,它会返回一个fs.Stats
对象,可以通过这个对象获取文件或文件夹的各种属性。其对象的一个方法属性isDirectory
,可以用于检查指定路径是否为一个文件夹。 -
existsSync
: 用于检查指定路径的文件或文件夹是否存在。它会返回一个布尔值,如果文件或文件夹存在则返回true
,否则返回false
。
import fs from 'fs-extra';
fs.readdir('./src/components')
.then(files => {
if (Array.isArray(files)) {
let exportStr = '';
files.forEach(item => {
// 检查是否为文件夹且文件夹名称符合大驼峰命名规范且包含index.tsx文件
if (
fs.lstatSync(`./src/components/${item}`).isDirectory() &&
/^[A-Z][a-zA-Z]*$/.test(item) &&
fs.existsSync(`./src/components/${item}/index.tsx`)
) {
exportStr = `${exportStr}nexport { default as ${item} } from './components/${item}';`;
}
});
fs.writeFile('./src/index.export.ts', exportStr);
})
.catch(err => console.error(err));
看到这里,是不是觉得 Node.js 脚本并没有什么难度,就跟写 js 代码一样,只是运行环境不同。
在脚本开发或BUG排查过程中,肯定会涉及到调试。调试 js 代码我们都很熟悉,那调试Node.js 脚本呢,是不是也跟调试 js 代码一样?下面给大家介绍一下。
如何调试Node.js脚本
当调试 Node.js 脚本时,虽然可以使用 console.log
来调试,但这种方法具有侵入性,个人不推荐使用。我们可以使用 VS Code 中自带的调试功能,可以像在浏览器中调试 js 一样方便地调试 Node.js 脚本。下面来介绍一下如何使用 VS Code 中自带的调试功能。
在VS Code中先点击下图中标识为①的图标后,在点击标识为的②的地方,创建launch.json文件。
选择 Node.js 类型的调试器
按下图选择要调试的脚本的执行命令,先按下图点击这个菜单。
然后输入之前在package.json
文件中的scripts
属性中定义的命令名称,来搜索要调试的脚本。
点击下图标识为①的图标,开始调试。
调试过程就跟用浏览器的DevTools调试js代码一样,如下图所示。
最后
最后,除了fs-extra
给大家分享一些常用的第三方 Node.js 包,大家可以去实践一下,写各种各样的用于前端工程中自动化操作的 Node.js 脚本。
-
yargs
: 用于解析命令行参数。它提供了简单易用的 API,可以帮助您定义和解析命令行参数,支持选项、标志和参数的定义和解析。 -
chalk
:用于给命令行输出添加颜色,可以让输出更具有可读性和吸引力。 -
cli-table
:用于在命令行中创建漂亮的表格,方便展示数据。 -
ora
:用于在命令行中显示加载动画,可以提示用户正在进行某些操作。 -
inquirer
:用于在命令行中创建交互式命令行界面,方便用户输入信息或进行选择。 -
boxen
:用于在命令行中创建带边框的框,可以突出显示某些信息。 -
progress
:用于在命令行中显示进度条,方便展示任务的进度。 -
figlet
:用于在命令行中生成艺术字体,可以让输出更具有视觉效果。 -
execa
:一个更强大的子进程管理工具,它提供了更多的选项和功能,例如并发执行、流控制、更好的错误处理等。它是一个跨平台的替代方案,可以替代 Node.js 的child_process
模块。 -
shelljs
:一个 Unix shell 命令的包装器,它允许你在 Node.js 中以类似于 Shell 脚本的方式执行命令。它提供了简单的接口来执行命令、获取输出和处理错误。
以上就是关于什么,你连一个Node.js脚本都不会写!!!相关的全部内容,希望对你有帮助。欢迎持续关注程序员导航网,学习愉快哦!