build:web 在带有 typescript 的 npm 脚本中失败答案

【问题标题】：build:web fails inside npm script with typescriptbuild:web 在带有 typescript 的 npm 脚本中失败
【发布时间】：2019-10-29 17:44:22
【问题描述】：

我们使用 expo-cli 作为本地依赖项，在没有全局安装 expo-cli 的情况下从 npm 脚本运行 build:web。在执行npm run build:web 时，我们得到以下异常。

为了创建一个最小示例，我们使用 expo init 创建了一个空白打字稿项目并运行npm install expo-cli -D。在没有打字稿的情况下做同样的事情，一切都按预期工作，所以我们认为问题与打字稿有关。

尝试构建时发生以下异常：

>>npm run build:web

> @ build:web /home/anna/examplets
> expo build:web

(node:24316) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'replace' of undefined
    at Object.<anonymous> (/home/anna/examplets/node_modules/@expo/webpack-config/src/withWorkbox.ts:142:10)
    at Generator.next (<anonymous>)
    at fulfilled (/home/anna/examplets/node_modules/@expo/webpack-config/webpack/withWorkbox.js:4:58)
(node:24316) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:24316) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

expo-diagnostics的输出：

Expo CLI 3.4.1 environment info:
    System:
      OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
      Shell: 4.4.20 - /bin/bash
    Binaries:
      Node: 10.16.2 - ~/.nvm/versions/node/v10.16.2/bin/node
      Yarn: 1.19.1 - /usr/bin/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v10.16.2/bin/npm
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5900203
    npmPackages:
      @types/react: ^16.8.23 => 16.9.11 
      @types/react-native: ^0.57.65 => 0.57.65 
      expo: ^35.0.0 => 35.0.0 
      react: 16.8.3 => 16.8.3 
      react-native: https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz => 0.59.8

这是package.json：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "build:web": "expo build:web"
  },
  "dependencies": {
    "expo": "^35.0.0",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-web": "^0.11.7"
  },
  "devDependencies": {
    "@types/react": "^16.8.23",
    "@types/react-native": "^0.57.65",
    "babel-preset-expo": "^7.1.0",
    "expo-cli": "^3.4.1",
    "typescript": "^3.6.3"
  },
  "private": true
}

【问题讨论】：

我在博览论坛发了同样的问题：forums.expo.io/t/…
这可能会有所帮助：withWorkbox.ts。如您所见，错误发生在第 142 行。似乎无法加载 register-service-worker.js 或其他内容。目前没有时间，但希望对您有所帮助！
@JKL 里面没有node_modules/@expo/webpack-config/src/withWorkbox.ts，但是有一个node_modules/@expo/webpack-config/webpack/withWorkbox.ts，有提到下面两行。我不知道为什么。为什么你认为它试图在这里加载register-service-worker.js？
也有这个问题，现在我已经将这一行 node_modules/@expo/webpack-config/webpack/withWorkbox.js:93 修补到if (false && entries.app && !entries.app.includes(swPath) && autoRegister) { 以跳过整个register-service-worker.js 块
我也遇到了这个错误并对此问题发表了评论：github.com/expo/expo-cli/issues/1161“我自己没有使用 TS 或 expo-cli 作为 dep，但 readFile -> readFileSync 为我修复了它。”跨度>

标签： javascript typescript react-native npm expo

【解决方案1】：

将 webpack-config 添加到您的项目中

yarn add -D @expo/webpack-config

创建一个 webpack.config.js 文件到你的项目路径：

const createExpoWebpackConfig = require("@expo/webpack-config");
module.exports = function(env, argv) {
  env.mode = "development";
  const config = createExpoWebpackConfig(env, argv);
  return config;
};

来源：https://medium.com/@toastui/from-zero-to-publish-expo-web-react-native-for-web-tutorial-e3e020d6d3ff

【讨论】：