油猴脚本开发环境搭建

在油猴脚本的浏览器扩展中直接编写脚本并不是最佳的开发模式，除了将开发中的脚本在扩展中用@require关键字进行引用后，用VS Code等编辑器进行开发。本文更进一步，在UglifyJS的支持下提升开发体验。

1. 源文件的链接

假设我们有这样一个工程目录：

ProjectFolder
│  defines.js
│  gm_header.js
│  program.js
│  class1.js
│  class2.js
│
├─lib
│      lib1.js
│      lib2.js
└─test
       unit-test.js

其中，defines.js是常量定义，class1.js，class2.js和program.js是我们自己编写的代码，lib目录内是我们引用的一些库，gm_header.js则是油猴脚本的文件头，即// ==UserScript==注释片段。那么我们可以在工程目录下编写一个build.bat来进行代码的连接和压缩，可类比编译器的连接和编译。构建脚本如下：

@REM build.bat
call uglifyjs defines.js, class1.js class2.js program.js -e -o tmp_link.js
call uglifyjs header.js tmp_link.js --comments all -o MyUserScript.min.user.js
del tmp_link.js

2. 脚本的单元测试

编写好的脚本虽然是在浏览器中运行，但也可以在VSCode中通过NodeJs进行单元测试。NodeJs中调用其他脚本的方法需要将脚本导出至模块。但将导出模块的代码写死，在浏览器中又会报错。我们可以利用uglifyjs的全局变量定义参数来达到编译预处理的条件编译效果。这里我们约定使用DEBUG全局变量来区分运行环境。以上面的class1.js为例：

// class1.js
class Class1{
    static staticProperty = "foo";
    memberMethod(){
        return "hello";
    }

    static staticMethod(){
        return "static Method";
    }
}
if(DEBUG){
    module.exports  = Class1;
}

这样即可在NodeJs中调用：

// UnitTest.js
const assert = require("assert");
const Class1 = require("class1");
const a = new Class1();
assert(a.memberMethod() == "hello");

相应的，uglifyjs命令行应这样写：

1	call uglifyjs defines.js, class1.js class2.js program.js -d DEBUG=0 -e -o tmp_link.js

3. 其他一些附带工作

每次生成新的脚本后，还需要手动在浏览器中重新安装，这里也可以用脚本一键部署，只需要点一下“重新安装”按钮即可：

@REM deploy.bat
SET BROWSER_PATH="D:\Program Files (x86)\Chrome 81 Portable\GoogleChromePortable.exe"
SET SCRIPT_PATH="file:///D:\project\dist\MyUserScript.min.user.js"
%BROWSER_PATH% %SCRIPT_PATH%

@REM 复制lib、打包、压缩代码此处略去