build:web在npm脚本中使用typescript失败

Question

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

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

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

>>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
}

Answer 1

将webpack配置添加到项目中

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