使用React with electron时,如何分离渲染器和主进程依赖关系



我有React web应用程序,我正在尝试将其作为桌面应用程序进行互操作。我所有的React依赖项都由生产上的webpack捆绑在一起,所以我不需要将这些节点模块包含在app.asar中,这不必要地增加了我的生产构建的大小。

现在我的问题是,它阻止了我包含主进程依赖项,因为我有排除package.json中node_modules的规则。我如何将主进程依赖关系分离出来,由electronic builder包含,但忽略呈现进程依赖项。我刚接触电子,所以任何帮助对我来说都很有价值

我的包.json看起来像这样:

"name": "app-name",
"version": "0.16.2",
"private": true,
"main": "public/electron.js",
"repository": "github repo",
"homepage": "./",
"build": {
"appId": "com.appname",
"productName": "productName",
"copyright": "copyright",
"dmg": {
"background": null,
"backgroundColor": "#ffffff",
"window": {
"width": "400",
"height": "300"
},
"contents": [{
"x": 100,
"y": 100
},
{
"x": 300,
"y": 100,
"type": "link",
"path": "/Applications"
}
]
},
"nsis": {
"createDesktopShortcut": "always",
"installerIcon": "./resources/icon.ico"
},
"mac": {
"target": "dmg",
"category": "public.app-category.business",
"icon": "./resources/icon.icns"
},
"win": {
"target": "nsis",
"extraResources": [
"./*.dll",
"!./exclude-me.dll"
]
},
"linux": {
"maintainer": "maintainer",
"target": "deb",
"category": "Utility"
},
"files": [
"./build/**/*",
"!node_modules"
],
"directories": {
"buildResources": "resources"
},
"publish": {
"provider": "github"
}
},
"scripts": {
"generate:meta": "node ./internals/scripts/generate-meta.js",
"start": "REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD` craco start",
"electron:dev": "concurrently "env-cmd -f .env.electron yarn start" "wait-on http://localhost:3002 && electron ."",
"electron:prod": "yarn build:staging && electron-builder",
"electron:release": "electron-builder -p 'onTagOrDraft'",
"postinstall": "electron-builder install-app-deps",
"start:windows": "git rev-parse --short HEAD >sha.txt && set /p REACT_APP_CURRENT_GIT_SHA= < sha.txt && del sha.txt && craco start",
"start:prod": "env-cmd -f .env.production yarn start",
"start:dev": "env-cmd -f .env.staging yarn start",
"build": "yarn generate:meta && REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD` craco build",
"build:staging": "env-cmd -f .env.staging yarn build",
"build:prod": "env-cmd -f .env.production yarn build",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet",
"lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
"test": "craco test",
"eject": "craco eject",
"generate": "graphql-codegen --config codegen.yml",
"extract-translations": "i18next",
"analyze": "cross-env REACT_APP_INTERACTIVE_ANALYZE=1 yarn build"
},
"husky": {
"hooks": {
"pre-push": "yarn lint",
"pre-commit": "pretty-quick --staged"
}
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"@ant-design/icons": "^4.6.2",
"@apollo/client": "^3.3.16",
"@hookform/resolvers": "^2.4.0",
"@sentry/browser": "^6.13.3",
"@sentry/tracing": "^6.13.3",
"@stripe/react-stripe-js": "^1.4.1",
"@stripe/stripe-js": "^1.15.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@twilio/voice-sdk": "^2.0.1",
"@types/react-beautiful-dnd": "^13.1.1",
"@types/react-color": "^3.0.5",
"@types/react-highlight-words": "^0.16.3",
"@types/react-responsive": "^8.0.2",
"@welldone-software/why-did-you-render": "^6.1.1",
"antd": "^4.15.4",
"apollo-link-token-refresh": "^0.3.2",
"apollo-upload-client": "^15.0.0",
"apollo3-cache-persist": "^0.9.1",
"craco-less": "^1.18.0",
"date-fns": "^2.16.1",
"dompurify": "^2.2.6",
"electron-is-dev": "^2.0.0",
"electron-updater": "^4.3.9",
"env-cmd": "^10.1.0",
"fernet": "^0.4.0",
"firebase": "^9.1.1",
"graphql": "^15.5.0",
"history": "^5.0.0",
"husky": "^4.3.0",
"i18next": "^19.8.7",
"i18next-browser-languagedetector": "^6.0.1",
"i18next-http-backend": "^1.1.0",
"immer": "^8.0.1",
"jspdf": "^2.3.1",
"jwt-decode": "^3.1.2",
"libphonenumber-js": "^1.9.6",
"linkify-html": "^3.0.2",
"linkifyjs": "^3.0.1",
"lint-staged": "^10.5.3",
"lodash.debounce": "^4.0.8",
"lodash.get": "^4.4.2",
"lodash.isempty": "^4.4.0",
"lodash.omit": "^4.5.0",
"lodash.startswith": "^4.2.1",
"npm-watch": "^0.11.0",
"papaparse": "^5.3.0",
"prettier": "^2.2.1",
"rc-picker": "^2.5.15",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.1.0",
"react-color": "^2.19.3",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.1",
"react-draggable": "^4.4.3",
"react-flag-kit": "^0.3.1",
"react-h5-audio-player": "^3.6.1",
"react-highlight-words": "^0.17.0",
"react-hook-form": "^7.4.0",
"react-i18next": "^11.8.6",
"react-icons": "^4.1.0",
"react-mic": "^12.4.6",
"react-perfect-scrollbar": "^1.5.8",
"react-phone-input-2": "^2.13.9",
"react-responsive": "^8.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"react-scroll": "^1.8.2",
"react-select": "^4.3.0",
"react-use-intercom": "^1.3.0",
"react-window": "^1.8.6",
"secure-ls": "^1.2.6",
"socket.io-client": "^3.0.4",
"styled-components": "^5.2.3",
"subscriptions-transport-ws": "^0.9.18",
"typescript": "^4.1.2",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^6.3.0",
"workbox-broadcast-update": "^6.3.0",
"workbox-cacheable-response": "^6.3.0",
"workbox-core": "^6.3.0",
"workbox-expiration": "^6.3.0",
"workbox-precaching": "^6.3.0",
"workbox-routing": "^6.3.0",
"workbox-strategies": "^6.3.0",
"xlsx": "^0.17.0",
"yup": "^0.32.5"
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.12.1",
"@craco/craco": "^6.2.0",
"@graphql-codegen/cli": "1.20.1",
"@graphql-codegen/fragment-matcher": "2.0.1",
"@graphql-codegen/introspection": "1.18.1",
"@graphql-codegen/typescript": "^1.20.2",
"@graphql-codegen/typescript-document-nodes": "1.17.9",
"@graphql-codegen/typescript-graphql-files-modules": "^1.18.1",
"@graphql-codegen/typescript-operations": "1.17.14",
"@graphql-codegen/typescript-react-apollo": "2.2.1",
"@types/apollo-upload-client": "^14.1.0",
"@types/dompurify": "^2.2.1",
"@types/emoji-mart": "^3.0.4",
"@types/jest": "^26.0.15",
"@types/lodash.debounce": "^4.0.6",
"@types/lodash.get": "^4.4.6",
"@types/lodash.isempty": "^4.4.6",
"@types/lodash.omit": "^4.5.6",
"@types/lodash.startswith": "^4.2.6",
"@types/node": "^12.0.0",
"@types/papaparse": "^5.2.4",
"@types/react": "^16.9.53",
"@types/react-copy-to-clipboard": "^5.0.0",
"@types/react-dom": "^16.9.8",
"@types/react-mic": "^12.4.2",
"@types/react-router-dom": "^5.1.6",
"@types/react-scroll": "^1.8.2",
"@types/react-select": "^4.0.13",
"@types/react-window": "^1.8.2",
"@types/requestidlecallback": "^0.3.1",
"@types/socket.io-client": "^1.4.34",
"@types/styled-components": "^5.1.4",
"@typescript-eslint/eslint-plugin": "^4.14.1",
"@typescript-eslint/parser": "^4.14.1",
"babel-plugin-import": "^1.13.3",
"compression-webpack-plugin": "6.1.1",
"concurrently": "^6.3.0",
"craco-swc": "^0.1.0",
"cross-env": "^7.0.3",
"electron": "^15.2.0",
"electron-builder": "^22.13.1",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0",
"i18next-parser": "^3.6.0",
"less": "^3.12.2",
"prettier-eslint": "^12.0.0",
"pretty-quick": "^3.1.0",
"simple-progress-webpack-plugin": "^2.0.0",
"wait-on": "^6.0.0",
"webpack-bundle-analyzer": "^4.4.2",
"webpackbar": "^5.0.0-3"
},
"description": "description",
"author": "author"
} ```

如果这些依赖关系用webpack打包,您可以安全地将它们移动到devDependencies,而devDependency不包括在最终应用程序的node_modules

最新更新