关于热更新的问题

[drc5521]

在一些场景下，我把界面设计好之后，需要在网站上进行调试，需要在网站上进获取页面的一些数据，当我改好之后，每次都要build，然后把代码复制到Tampermonkey里面，非常的麻烦。能不能热更新之后，自动build一份，我通过// @require就可以直接引用了。

[huangxubo23]

使用@require引用JS文件，没法调用Tampermonkey的方法。

我这边的做法是在dev开发时，mock需要调用Tampermonkey的方法并返回demo数据，这样在开发阶段和开发普通的web项目体验是一样的。

等dev开发完成后，打包生产环境的js文件，并把代码复制到Tampermonkey里面，看实际运行效果，并进行必要的代码微调。

[drc5521]

使用@require引用JS文件，没法调用Tampermonkey的方法。

我这边的做法是在dev开发时，mock需要调用Tampermonkey的方法并返回demo数据，这样在开发阶段和开发普通的web项目体验是一样的。

等dev开发完成后，打包生产环境的js文件，并把代码复制到Tampermonkey里面，看实际运行效果，并进行必要的代码微调。

明白了，多谢指导，可以将一些mock的示例更新到项目中，也方便其他的人进行参考，非常感谢。

[huangxubo23]

可以在utils/index.js，添加方法，然后在需要用到的地方引用就可以了。

这里以GM_setValue和GM_getValue为例，开发环境使用localStorage存储值：

import { isDev } from '@/config';

export function setValue(name, value) {
  const val = typeof value === 'string' ? value : JSON.stringify(value);
  return isDev ? localStorage.setItem(name, val) : GM_setValue(name, val);
}

export function getValue(name, parse) {
  let val = isDev ? localStorage.getItem(name) : GM_getValue(name);
  try {
    if (parse) {
      val = JSON.parse(val);
    }
    return val;
  } catch (error) {
    return val;
  }
}

其它方法以此类推~