我有一个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
及其容器、视图、组件和模型。
1条答案
按热度按时间jdzmm42g1#
TLDR;您需要在库
package.json
文件中指定main
和types
字段。您需要了解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
:您也可能最终使用较新的
exports
和type
字段,具体取决于要求和目标。所以总结一下,你不能直接使用
.ts
文件作为包的main
入口文件。您需要编译库的ts
代码并使用生成的代码,然后使用生成的代码发布NPM模块或git标签。