reactjs Webpack/React在运行时因依赖关系类型脚本错误而失败

bxpogfeg  于 2023-10-17  发布在  React
关注(0)|答案(1)|浏览(145)

我有一个React + Webpack项目,旨在从不同的repo中获取react模块,然后以特定的方式将它们捆绑起来成为Web组件。我把我的模块导入到我的json包中:"react-modules": "git+ssh:// [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection) :my-repo#tag,并在我的web组件项目中像普通的import { SomeModule } from "react-modules"一样使用它们然而,即使导入一个小模块,我的整个项目也会变得疯狂。它会分析所有的react-modules,并在内部的每一个类型脚本错误上失败,包括那些被注解掉的错误。我补充了建议的沙皇:

"include": ["./src/**/*"],
  "exclude": ["node_modules/*", "dist"],
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es6",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "lib": ["ESNext", "dom"],
    "noEmit": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "downlevelIteration": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  }
}

但无济于事。
我希望能够导入模块,而不会在导入模块的每一个单独的 typescript 错误上中断
react-modules的package.json:

{
  "name": "react-modules",
  "version": "0.0.2",
  "description": "React modules",
  "main": "src/index.ts",
  "license": "UNLICENSED",
  "peerDependencies": {},
  "dependencies": {
    "@apollo/client": "^3.7.15",
    "@material-ui/core": "^4.11.4",
    "@pdftron/webviewer": "8.1.0",
    "@rematch/select": "^2.0.5",
    "@sentry/browser": "^7.54.0",
    "@sentry/react": "^7.54.0",
    "@types/material-ui": "^0.21.8",
    "apollo-client": "^2.4.5",
    "element-closest": "^3.0.0",
    "flow-typed": "^3.3.1",
    "global": "^4.4.0",
    "graphql": "14.0.2",
    "graphql-tag": "^2.12.6",
    "highcharts": "6.1.1",
    "highcharts-react-official": "1.4.0",
    "html-to-image": "^1.9.0",
    "i18next": "11.9.0",
    "i18next-xhr-backend": "3.0.0",
    "lodash": "4.17.10",
    "moment": "2.22.2",
    "prop-types": "15.6.1",
    "rc-slider": "^9.7.1",
    "react": "16.14.0",
    "react-apollo": "2.1.11",
    "react-circular-progressbar": "2.0.3",
    "react-content-loader": "^4.3.4",
    "react-contenteditable": "^3.3.5",
    "react-dom": "16.14.0",
    "react-i18next": "8.0.6",
    "react-intercom": "^1.0.15",
    "react-pdf": "^4.1.0",
    "react-redux": "^5.1.1",
    "react-responsive": "^6.1.1",
    "react-select": "^5.7.3",
    "react-swipeable": "4.2.0",
    "react-tippy": "https://github.com/HiredScore/react-tippy/tarball/39b3b7d625bc8e07b4cb2352149111aace8f007c",
    "react-toastify": "^8.1.0",
    "react-tooltip": "^4.2.6",
    "react-virtualized": "^9.22.3",
    "react-widgets": "^4.4.10",
    "recompose": "^0.26.0",
    "scroll-into-view": "^1.9.3",
    "string-pixel-width": "^1.10.0",
    "styled-components": "^5.3.3",
    "styled-system": "5.1.5",
    "typesync": "^0.8.0"
  },
  "scripts": {
    "start": "NODE_ENV=development webpack --mode=development --watch",
    "build": "NODE_ENV=production ./node_modules/.bin/webpack --mode=production",
    "storybook": "start-storybook -p 9001 -c .storybook -s ./.storybook/static",
    "storybook:build": "yarn build-storybook -s ./.storybook/static",
    "storybook:ci": "STORYBOOK_CI=true yarn storybook:build",
    "design-system": "yarn storybook:build -o designsystem-static",
    "test": "node scripts/test.js --env=jsdom --silent",
    "test:debug": "yarn test -u --runInBand --no-cache --ci --silent=False",
    "test:visual:build": "yarn storybook:ci > /dev/null 2>&1",
    "test:visual:run": "yarn loki test --chromeDockerImage yukinying/chrome-headless-browser:93.0.4535.3 --reactUri file:./storybook-static",
    "loki-test-report": "reg-cli ./.loki/current ./.loki/reference ./.loki/difference --extendedErrors --enableAntialias --report ./.loki/report.html --json ./.loki/report.json",
    "test:visual:update": "yarn storybook:ci && yarn loki update --chromeDockerImage yukinying/chrome-headless-browser:93.0.4535.3 --reactUri file:./storybook-static",
    "test:all": "CI=1 yarn test && yarn test:visual:run",
    "test:all:update": "CI=1 yarn test -u && yarn test:visual:update",
    "build-all": "yarn build",
    "typecheck": "tsc --noEmit",
    "lint": "eslint src/ --ext .js,.ts,.tsx",
    "wtf": "./node_modules/.bin/rimraf node_modules && rm -f package-lock.json && rm -f yarn.lock && yarn cache clean && yarn",
    "test:coverage": "yarn test --watchAll=false --coverage",
    "generate": "plop"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.0",
    "@babel/core": "^7.5.4",
    "@babel/helper-builder-react-jsx-experimental": "^7.12.11",
    "@babel/helper-define-map": "^7.15.4",
    "@babel/plugin-proposal-class-properties": "^7.5.0",
    "@babel/plugin-transform-runtime": "^7.5.0",
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.5.4",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.16.0",
    "@babel/register": "^7.4.4",
    "@babel/runtime": "^7.5.4",
    "@loki/create-async-callback": "^0.28.0",
    "@purtuga/esm-webpack-plugin": "^1.5.0",
    "@rematch/core": "^1.1.0",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-console": "^1.2.3",
    "@storybook/addon-controls": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/addon-storyshots": "^6.3.12",
    "@storybook/addon-storyshots-puppeteer": "^6.3.12",
    "@storybook/addon-viewport": "^6.3.12",
    "@storybook/addons": "^6.3.12",
    "@storybook/cli": "^6.3.12",
    "@storybook/react": "^6.3.12",
    "@svgr/webpack": "^5.4.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "12.0.0",
    "@types/babel__core": "^7.1.18",
    "@types/babel__plugin-transform-runtime": "^7.9.2",
    "@types/babel__preset-env": "^7.9.2",
    "@types/case-sensitive-paths-webpack-plugin": "2.1.2",
    "@types/element-closest": "^3.0.0",
    "@types/enzyme": "3.10.11",
    "@types/enzyme-adapter-react-16": "1.0.6",
    "@types/eslint": "^8.4.1",
    "@types/eslint-plugin-prettier": "^3.1.0",
    "@types/file-loader": "5.0.1",
    "@types/html-webpack-plugin": "3.2.6",
    "@types/jest-specific-snapshot": "^0.5.5",
    "@types/lodash": "4.14.178",
    "@types/mini-css-extract-plugin": "^2.5.1",
    "@types/mockdate": "3.0.0",
    "@types/optimize-css-assets-webpack-plugin": "5.0.1",
    "@types/prettier": "^2.4.3",
    "@types/prop-types": "15.7.4",
    "@types/react": "^18.0.12",
    "@types/react-dev-utils": "^9.0.11",
    "@types/react-dom": "^18.0.5",
    "@types/react-pdf": "^5.7.2",
    "@types/react-redux": "^7.1.24",
    "@types/react-responsive": "^8.0.5",
    "@types/react-test-renderer": "17.0.1",
    "@types/react-virtualized": "^9.21.16",
    "@types/react-widgets": "^4.4.7",
    "@types/recompose": "^0.26.5",
    "@types/rimraf": "^3.0.2",
    "@types/scroll-into-view": "^1.16.0",
    "@types/string-pixel-width": "^1.7.2",
    "@types/styled-components": "^5.1.25",
    "@types/styled-system": "^5.1.15",
    "@types/webpack": "5.28.0",
    "@types/webpack-dev-server": "3.11.0",
    "@types/webpack-manifest-plugin": "3.0.5",
    "@types/workbox-webpack-plugin": "3.6.3",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    "add": "^2.0.6",
    "add-npm-scripts": "^1.0.0",
    "addon-storyshots-selenium": "0.1.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.4",
    "babel-plugin-import-graphql": "^2.6.2",
    "babel-plugin-named-asset-import": "0.3.1",
    "babel-plugin-react-generate-property": "1.0.5",
    "babel-plugin-require-context-hook": "1.0.0",
    "babel-plugin-styled-components": "^1.10.0",
    "babel-plugin-transform-dynamic-import": "^2.1.0",
    "babel-preset-react-app": "^9.0.0",
    "case-sensitive-paths-webpack-plugin": "2.1.2",
    "css-loader": "1.0.0",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.6",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "17.1.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "3.0.0",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jest": "21.25.1",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-node": "5.1.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-promise": "3.5.0",
    "eslint-plugin-react": "7.11.1",
    "eslint-webpack-plugin": "^2.5.2",
    "expect": "23.1.0",
    "file-loader": "2.0.0",
    "html-webpack-plugin": "4.0.0-beta.5",
    "jest": "^26.0",
    "jest-junit": "6.4.0",
    "jest-specific-snapshot": "^1.0.0",
    "jest-styled-components": "^7.0.8",
    "loki": "^0.28.1",
    "mini-css-extract-plugin": "^0.4.2",
    "mockdate": "2.0.2",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "plop": "^3.1.1",
    "pnp-webpack-plugin": "1.1.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "^6.6.0",
    "postcss-safe-parser": "4.0.2",
    "prettier": "^2.4.0",
    "react-dev-utils": "5.0.2",
    "react-svg-loader": "3.0.3",
    "react-test-renderer": "16.4.0",
    "reg-cli": "^0.16.1",
    "rimraf": "^2.6.3",
    "sass-loader": "7.1.0",
    "storybook-addon-locale": "^0.3.6",
    "style-loader": "0.23.1",
    "ts-migrate": "^0.1.26",
    "typescript": "^4.5.2",
    "url-loader": "1.1.2",
    "webpack": "4.44.2",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "3.11.0",
    "webpack-manifest-plugin": "2.0.4",
    "webpack-md5-hash": "0.0.6",
    "workbox-webpack-plugin": "3.6.3"
  },
  "resolutions": {
    "enzyme/cheerio": "=1.0.0-rc.3"
  },
  "loki": {
    "requireReference": true,
    "chromeDockerWithoutSeccomp": true,
    "chromeFlags": "--headless --disable-gpu --hide-scrollbars --no-sandbox",
    "chromeSelector": ".wrapper > *, #root > *",
    "configurations": {
      "chrome.laptop": {
        "target": "chrome.docker",
        "width": 1366,
        "height": 768,
        "mobile": false,
        "fetchFailIgnore": "/sample-videos/"
      }
    }
  }
}

其结构基本上是:src/components/component/component.tsx,它是redux,所以还有:src/blocks/block/index.ts及其容器、视图、组件和模型。

jdzmm42g

jdzmm42g1#

TLDR;您需要在库package.json文件中指定maintypes字段。
您需要了解TypeScript如何更改开发基于Node.js/NPM的应用程序的工作流程。
首先,您正在使用TypeScript编写库react-modules。当您将其作为dependency安装在其他项目中时,无论是通过npm注册表还是使用消费应用程序的package.json中指定的git+ssh://,它都会安装在node_modules文件夹中。node_modules中的任何内容都应该是JavaScript,而不是原始的TypeScript源文件(除非您使用的是Deno或类似的TS运行时)。
当你在技术栈中引入TypeScript时,你的工作流程大致是这样的:
1.使用TypeScript编写库。
1.一般来说,当您使用TypeScript的CLI -tsc进行编译时,它会将您的源代码编译为JavaScript代码。您可以将生成的代码放在任何地方。通常使用<ROOT>/dist<ROOT>/build文件夹作为约定。
1.如果你有一些复杂的设置(比如从TS文件导入CSS),那么普通的tsc是不够的。你将需要一个像Webpack这样的插件来将CSS精确到一个独立的CSS文件中。对于库,由于各种原因,Rollup.js是更好的选择。
1.使用tsc编译的代码为每个源.ts文件生成两个文件-一个普通的旧.js文件不包含TS代码,另一个是*.d.ts文件,TypeScript编译器使用该文件来理解库公开的形状和类型。
1.请注意,这些*.d.ts是纯定义文件。他们的缺席对Node.js甚至Webpack这样的插件都没有影响。它仅在使用tsc运行类型检查时才有影响。
1.如果您将库发布到NPM(适用于您的情况,因为您使用的是git+ssh://协议),则需要生成dist文件夹并使其成为标记的一部分(有效地提交生成的dist文件夹)。
1.最后,如果你使用dist文件夹来生成编译后的代码,而你的库的barrel文件是src/index.ts,那么你需要用以下字段更新库的package.json

{
  "name": "react-modules",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts"
}

您也可能最终使用较新的exportstype字段,具体取决于要求和目标。
所以总结一下,你不能直接使用.ts文件作为包的main入口文件。您需要编译库的ts代码并使用生成的代码,然后使用生成的代码发布NPM模块或git标签。

相关问题