本篇文章是在实现up大大清蒸QB的ani-cursor.js时遇到的问题和在butterfly实现过程

关于ani-cursor.js详细介绍请查看清蒸QB博客、GitHub、CSDN这里就不介绍了。当你完成在bash中安装命令npm install ani-cursor.js和在source/js中新建一个文件（我的叫mouse.js）使用函数 setANICursor 之类来将你的 ani 用于配置ani地址和引用到的属性详细方法参考清蒸QBGitHub我的如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { setANICursor } from "ani-cursor.js";
import { setANICursorWithGroupElement } from "ani-cursor.js";

// 为<body>设置动画鼠标指针
setANICursor("body", "/img/ani/XXX.ani", "auto");

// 为<img>设置动画鼠标指针
setANICursor("img", "/img/ani/XXX.ani", "auto");

// 为<p>设置动画鼠标指针
let textAbleGroup = [
    "input",
    'input[type="text"]',
    "textarea",
    "span",
    "p",
    "h1",
    "h2",
    "h3",
    "h4",
    "h5",
    "h6",
];
setANICursorWithGroupElement(textAbleGroup, "/img/ani/XXX.ani");

xxx设置为自己的文件名，不会的参考Hexo 博客添加自定义 css 和 js 文件后安装依赖

  1. 初始化项目（如果尚未初始化）:
    打开终端，切换到你的 Hexo 项目根目录，并运行以下命令以初始化一个新的 npm 项目（如果还没有 package.json 文件的话）：

    1
    npm init -y

  2. 安装 Webpack 相关依赖:
    安装 Webpack 核心库以及 Webpack CLI：

    1
    npm install --save-dev webpack webpack-cli

  3. 安装 Babel 相关依赖:
    Babel 用于将 ES6+ 代码转换为向后兼容的 JavaScript 版本，以下是必要的 Babel 插件和预设：

    1
    npm install --save-dev @babel/core @babel/preset-env babel-loader

  4. 安装 buffer polyfill

    Webpack 5 不再自动包含 Node.js 核心模块的 polyfill（例如 buffer），所以你需要手动安装该 polyfill。

    运行以下命令来安装 buffer 包：

    1
    npm install buffer

  5. 配置 Babel:
    在项目根目录下创建一个 .babelrc 文件或 babel.config.js 文件，并添加以下内容：

    1
    2
    3
    4
    5
    {
      "presets": [
        "@babel/preset-env"
      ]
    }

  6. 配置 Webpack:
    在项目根目录下创建一个 webpack.config.js 文件，并添加以下配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
       const path = require('path');

    module.exports = {
      entry: './source/js/mouse.js',  // 入口文件
      output: {
        filename: 'bundle.js',  // 打包后的文件名
        path: path.resolve(__dirname, 'source/js'),  // 输出路径
      },
      resolve: {
        fallback: {
          "buffer": require.resolve("buffer/")  // 添加 polyfill
        }
      },
      module: {
        rules: [
          {
            test: /\.js$/,  // 匹配所有的 JavaScript 文件
            exclude: /node_modules\/(?!ani-cursor\.js\/|byte-data|endianness|ieee754-buffer|riff-file|utf8-buffer)/,  // 排除 node_modules 中的文件，但包括 ani-cursor.js
            use: {
              loader: 'babel-loader',  // 使用 Babel 转译代码
              options: {
                presets: ['@babel/preset-env'],  // 转译成兼容的 JavaScript
              },
            },
          },
        ],
      },
      resolve: {
        extensions: ['.js'],  // 支持的文件扩展名
      },
      mode: 'production',  // 生产模式
    };

  7. 安装 ani-cursor.js:
    使用 npm 安装 ani-cursor.js：

    1
    npm install ani-cursor

  8. 修改 Hexo 主题布局文件:
    在你的 Hexo 主题的**_config.butterfly.yml**布局文件中添加以下代码来引入打包后的 JavaScript 文件：

    1
    -<script src="/js/bundle.js"></script>

  9. 添加构建脚本:
    在 package.json 文件中添加一个构建脚本，以便于使用 Webpack 打包：

    1
    2
    3
    "scripts": {
      "webpack": "webpack --config webpack.config.js"
    }

  10. 执行jsc生成

    1
    npx webpack --config webpack.config.js