当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    如何利用node.js开发一个生成逐帧动画的小工具

    栏目:代码类 时间:2019-12-01 18:06

    前言

    在实际工作中我们已经下下来不下于一万个npm包了,像我们熟悉的 vue-cli,react-native-cli 等,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目。在实际开发项目中,我们也可以定制一个属于自己的npm包,来提高自己的工作效率。

    为什么要开发一个工具包?

    减少重复性的工作,不再需要复制其他项目再删除无关代码,或者从零创建一个项目和文件。 根据交互动态生成项目结构和所需要的文件等。 减少人工检查的成本。 提高工作效率,解放生产力。

    这次以帧动画工具为例,来一步一步解析如何开发一个npm包。

    开始前的准备

    以我们这次为例。由于目前在做一些活动页相关的工作,其中动画部分全都采用CSS3中的animation来完成,但是这样每次开发都要计算百分比,手动判断动画的一些属性值,十分耗时又很容易出错,就想能不能写个脚本,直接一行命令就可以搞定了呢?!答案当然是肯定的。

    理清思路

    我们要做一个可以通过读取图片就可以自动生成包含CSS animation的HTML页面,以后需要生成相应的CSS片段,直接执行命令就可以了。

    初始化

    既然是npm包,那我们就需要在npmjs上注册一个账号,注册完成之后回到本地新建一个文件目录fbf,进入fbf目录下执行npm init -y。

    {
     "name": "fbf",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
     },
     "bin": {
      "test": "index.js"
     },
     "keywords": [],
     "author": "",
     "license": "ISC"
    }

      这样,你的package.json就建好了。

    依赖的库

    来看看会用到哪些库。

    commander.js,可以自动的解析命令和参数,用于处理用户输入的命令。 chalk,可以给终端的字体加上颜色。 create-html,创建HTML模版,用于生成HTML。 image-size,获取图片大小。
    npm install commander chalk create-html image-size -S

    命令行操作

    node.js 内置了对命令行操作的支持,在 package.json 中的 bin 字段可以定义命令名和关联的执行文件。所以现在 package.json 中加上 bin 的内容:

    {
     "name": "fbf",
     "version": "1.0.0",
     "description": "",
     "bin": {
     "fbf": "index.js"
     },
     ...
    }

    然后在 index.js 中来定义 start 命令:

    #!/usr/bin/env node
    const program = require('commander');
     
    program.version('1.0.0', '-v, --version')
     .command('start <name>')
     .action((name) => {
     console.log(name);
     });
    program.parse(process.argv);

    调用 version('1.0.0', '-v, --version') 会将 -v 和 --version 添加到命令中,可以通过这些选项打印出版本号。

    调用 command('start <name>') 定义 start 命令,name 则是必传的参数,为文件名。

    action() 则是执行 start 命令会发生的行为,要生成项目的过程就是在这里面执行的,这里暂时只打印出 name。

    其实到这里,已经可以执行 start 命令了。我们来测试一下,在 fbf 的同级目录下执行:

    node ./test/index.js start HelloWorld

    可以看到命令行工具也打印出了 HelloWorld,那么很清楚, action((name) => {}) 这里的参数 name,就是我们执行 start 命令时输入的项目名称。

    命令已经完成,接下来就要针对图片的操作了。