GatsbyJS：如何在gatsby-plugin-offline生成的Service Worker中导入npm包

gatsby-plugin-offline 的 appendScript 配置仅会将目标文件的原始内容直接追加到自动生成的Service Worker文件末尾，不会经过Gatsby的JS编译打包流程，你写的import/require语句无法被转换为浏览器Service Worker环境可识别的代码，因此会触发运行异常。

方案1：通过Gatsby Webpack配置预编译自定义SW代码（推荐多依赖场景） #

该方案可以复用Gatsby现有编译能力，直接处理你写的带npm包导入的SW源码：

• 修改项目根目录的gatsby-node.js文件，新增独立的SW编译入口：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    entry: {
      // 此处指向你写的带import语句的原始SW源码
      'custom-sw-compiled': './src/custom-sw-code.js'
    },
    output: {
      filename: '[name].js',
      path: `${__dirname}/public`
    },
    // 指定编译目标为webworker，适配Service Worker运行环境
    target: 'webworker'
  })
}

• 修改gatsby-config.js里的gatsby-plugin-offline配置，将appendScript指向编译后的输出文件：

{
  resolve: `gatsby-plugin-offline`,
  options: {
    appendScript: './public/custom-sw-compiled.js',
  },
},

• 正常执行gatsby build即可，Gatsby会先完成自定义SW的编译，再将编译后的代码追加到最终的Service Worker文件中。

方案2：使用importScripts引入UMD格式依赖（推荐轻量依赖场景） #

如果你依赖的npm包提供UMD格式的构建产物，可直接用Service Worker原生支持的importScripts方法引入，无需额外配置编译流程：

• 将依赖包的UMD格式构建文件放到项目根目录的static文件夹下
• 在custom-sw-code.js开头添加引入语句即可调用依赖：

// 示例引入放在static目录下的lodash UMD文件
importScripts('/lodash.min.js')
// 后续可直接使用依赖暴露的全局变量
console.log(_.chunk([1,2,3,4], 2))

注意：所有在Service Worker中运行的代码都不能调用Node.js原生API，必须适配Web Worker运行环境，否则仍会出现运行异常。

内容的提问来源于stack exchange，提问作者Berlin_J