zqy233的前端学习笔记

主题

回到顶部
索引

脚本开发

使用javaScript开发脚本，node使javaScript的脚本功能更强大了

1.创建空项目

bash
# 创建名为node-test的空文件夹
mkdir node-test
# 进入node-test目录
cd node-test
# 初始化package.json
npm init -y

# 创建名为node-test的空文件夹
mkdir node-test
# 进入node-test目录
cd node-test
# 初始化package.json
npm init -y

2.新建index.js

行首加入 #!/usr/bin/env node 指定当前脚本由node.js进行解析

js
#! /usr/bin/env node
console.log('hello world')

#! /usr/bin/env node
console.log('hello world')

3.配置package.json

node.js 内置了对命令行操作的支持，package.json 中的 bin 字段可以定义命令名和关联的执行文件

json
"bin": {
  "node-test": "index.js"
}

"bin": {
  "node-test": "index.js"
}

4.执行npm link链接命令到全局

sh
npm link

npm link

现在可以本地使用bin里的命令,打开终端，输入：

sh
# 输入
node-test
# 打印结果
hello world

# 输入
node-test
# 打印结果
hello world

获取所有markdown文件的js脚本

js
fs.readdirSync(defaultPath).forEach((fileName) => {
    const dirPath = path.join(defaultPath, fileName)
    const stat = fs.statSync(dirPath) // stat的mtime为修改文件时间,后续可以去实现最后编辑时间
    // 是文件夹，则递归
    if (stat.isDirectory() === true) {
      i++
      console.log(i, dirPath, fileName)
      findAllMarkDown(dirPath)
    }

    // 判断如果是markdown文件，存储路径信息
    if (stat.isFile() === true && fileName.slice(-3) == '.md') {
      items.push(
        dirPath
          .replace(fullPath, '')
          .replace(/.md/g, '')
          .replace(/\\/g, '/')
          .replace('/', '')
      )
    }
  }) 

fs.readdirSync(defaultPath).forEach((fileName) => {
    const dirPath = path.join(defaultPath, fileName)
    const stat = fs.statSync(dirPath) // stat的mtime为修改文件时间,后续可以去实现最后编辑时间
    // 是文件夹，则递归
    if (stat.isDirectory() === true) {
      i++
      console.log(i, dirPath, fileName)
      findAllMarkDown(dirPath)
    }

    // 判断如果是markdown文件，存储路径信息
    if (stat.isFile() === true && fileName.slice(-3) == '.md') {
      items.push(
        dirPath
          .replace(fullPath, '')
          .replace(/.md/g, '')
          .replace(/\\/g, '/')
          .replace('/', '')
      )
    }
  })

监听文件夹变化

http://ourjs.com/detail/54effe65232227083e000038

https://www.npmjs.com/package/chokidar

使用plop生成模板文件

安装

sh
npm i -D plop

npm i -D plop

创建plopfile.js

js
module.exports = plop => {
  // 设置一个生成器，第一个参数是项目名称，第二个函数是对象，对应设置选项
  plop.setGenerator("compontent", {
    // 描述
    description: "create a component",
    // 命令行交互问题
    prompts: [
      // 一个问题对应一个对象，配置参考自定义Generator
      {
        type: "input",
        name: "dirName",
        message: "dir name",
        default: "MyComponent",
      },
      {
        type: "input",
        name: "componentName",
        message: "component name",
        default: "MyComponent",
      },
    ],
    // 完成命令行交互过后完成的一些动作
    actions: [
      //每一个对象都是一个动作
      {
        type: "add", // 代表添加文件
        // 被添加的文件在输出的哪个路径，双花括号插值表达式可以获取交互得到的数据
        path: "src/components/{{dirName}}/{{componentName}}.vue",
        // 模板文件是什么
        templateFile: "plop-templates/vue.hbs",
      },
    ],
  })
}

module.exports = plop => {
  // 设置一个生成器，第一个参数是项目名称，第二个函数是对象，对应设置选项
  plop.setGenerator("compontent", {
    // 描述
    description: "create a component",
    // 命令行交互问题
    prompts: [
      // 一个问题对应一个对象，配置参考自定义Generator
      {
        type: "input",
        name: "dirName",
        message: "dir name",
        default: "MyComponent",
      },
      {
        type: "input",
        name: "componentName",
        message: "component name",
        default: "MyComponent",
      },
    ],
    // 完成命令行交互过后完成的一些动作
    actions: [
      //每一个对象都是一个动作
      {
        type: "add", // 代表添加文件
        // 被添加的文件在输出的哪个路径，双花括号插值表达式可以获取交互得到的数据
        path: "src/components/{{dirName}}/{{componentName}}.vue",
        // 模板文件是什么
        templateFile: "plop-templates/vue.hbs",
      },
    ],
  })
}

图片压缩

缺点：图片最大10m左右

js
import imagemin from 'imagemin'
import imageminJpegtran from 'imagemin-jpegtran'
import imageminPngquant from 'imagemin-pngquant'
import fs from 'fs'
import path from 'path'

// 待压缩的图片所在的文件夹
const sourcePath = path.resolve('./images')
// 压缩后的图片的输出路径
const targetPath = path.resolve('./output')

/**
 * 读取文件夹下的所有图片列表
 * @param {Function} cb
 */
const getImagesList = cb => {
  fs.readdir(sourcePath, (err, files) => {
    if (!err) {
      return cb(files.map(name => path.join(sourcePath, name)))
    }
    console.log(err)
  })
}

/**
 * 压缩图片
 * @param {Array} files
 */
const compress = async files => {
  console.log('files', files, targetPath)
  return await imagemin(files, {
    destination: targetPath,
    plugins: [
      imageminJpegtran(),
      imageminPngquant({
        quality: [0.6, 0.6],
      }),
    ],
  })
}

const run = () => {
  getImagesList(async files => {
    for (let index = 0; index < files.length; index++) {
      try {
        console.log(`文件路径：${files[index]}`)
        // 图片一张一张处理，降低处理失败的概率。
        const results = await compress([files[index]])
        console.log('输出结果：', results)
      } catch (error) {
        console.log(error)
      }
    }
  })
}

run()

import imagemin from 'imagemin'
import imageminJpegtran from 'imagemin-jpegtran'
import imageminPngquant from 'imagemin-pngquant'
import fs from 'fs'
import path from 'path'

// 待压缩的图片所在的文件夹
const sourcePath = path.resolve('./images')
// 压缩后的图片的输出路径
const targetPath = path.resolve('./output')

/**
 * 读取文件夹下的所有图片列表
 * @param {Function} cb
 */
const getImagesList = cb => {
  fs.readdir(sourcePath, (err, files) => {
    if (!err) {
      return cb(files.map(name => path.join(sourcePath, name)))
    }
    console.log(err)
  })
}

/**
 * 压缩图片
 * @param {Array} files
 */
const compress = async files => {
  console.log('files', files, targetPath)
  return await imagemin(files, {
    destination: targetPath,
    plugins: [
      imageminJpegtran(),
      imageminPngquant({
        quality: [0.6, 0.6],
      }),
    ],
  })
}

const run = () => {
  getImagesList(async files => {
    for (let index = 0; index < files.length; index++) {
      try {
        console.log(`文件路径：${files[index]}`)
        // 图片一张一张处理，降低处理失败的概率。
        const results = await compress([files[index]])
        console.log('输出结果：', results)
      } catch (error) {
        console.log(error)
      }
    }
  })
}

run()

Node.js创建一个简单的Web服务器托管Word文件

js
const express = require("express");
const app = express();
const path = require("path");

const wordFilePath = "./资料表.docx";
const directoryPath = path.dirname(wordFilePath); // 获取文件所在目录

// 设置静态文件目录
app.use("/wordfiles", express.static(path.resolve(__dirname, directoryPath)));

// 路由，返回Word文件的绝对路径
app.get("/wordfile-path", (req, res) => {
  res.send(path.resolve(__dirname, wordFilePath));
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
});

const express = require("express");
const app = express();
const path = require("path");

const wordFilePath = "./资料表.docx";
const directoryPath = path.dirname(wordFilePath); // 获取文件所在目录

// 设置静态文件目录
app.use("/wordfiles", express.static(path.resolve(__dirname, directoryPath)));

// 路由，返回Word文件的绝对路径
app.get("/wordfile-path", (req, res) => {
  res.send(path.resolve(__dirname, wordFilePath));
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
});

Node.js创建一个简单的Web服务器实现word文件流下载

js
const express = require("express");
const officegen = require("officegen");
const fs = require("fs");
const cors = require("cors"); // 引入 cors 模块，实现跨域请求

const app = express();
// 使用 cors 中间件
app.use(cors());

app.get("/api/generateDocx", (req, res) => {
  // 创建一个 Word 文档
  const docx = officegen("docx");
  const stream = fs.createWriteStream("generated_doc.docx");

  // 添加内容到文档
  docx
    .createP()
    .addText("我是一个文本!", { font_face: "Arial", font_size: 14 });

  // 将生成的 Word 文档流写入文件
  docx.generate(stream);
  stream.on("finish", () => {
    // 设置响应头，指示返回的是 Word 文档
    res.setHeader(
      "Content-Type",
      "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    );
    // 下载文件
    res.download("generated_doc.docx", "generated_doc.docx", (err) => {
      if (err) {
        console.error("Error downloading file:", err);
      }
      // 删除生成的临时文件
      fs.unlink("generated_doc.docx", (err) => {
        if (err) {
          console.error("Error deleting file:", err);
        }
      });
    });
  });
});

app.listen(8000, () => {
  console.log(`Server is running on port 8000`);
});

const express = require("express");
const officegen = require("officegen");
const fs = require("fs");
const cors = require("cors"); // 引入 cors 模块，实现跨域请求

const app = express();
// 使用 cors 中间件
app.use(cors());

app.get("/api/generateDocx", (req, res) => {
  // 创建一个 Word 文档
  const docx = officegen("docx");
  const stream = fs.createWriteStream("generated_doc.docx");

  // 添加内容到文档
  docx
    .createP()
    .addText("我是一个文本!", { font_face: "Arial", font_size: 14 });

  // 将生成的 Word 文档流写入文件
  docx.generate(stream);
  stream.on("finish", () => {
    // 设置响应头，指示返回的是 Word 文档
    res.setHeader(
      "Content-Type",
      "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    );
    // 下载文件
    res.download("generated_doc.docx", "generated_doc.docx", (err) => {
      if (err) {
        console.error("Error downloading file:", err);
      }
      // 删除生成的临时文件
      fs.unlink("generated_doc.docx", (err) => {
        if (err) {
          console.error("Error deleting file:", err);
        }
      });
    });
  });
});

app.listen(8000, () => {
  console.log(`Server is running on port 8000`);
});

Released under the MIT License.

Copyright © 2022.4-2024.7