Я создаю отдельный репозиторий для разделяемого компонента пользовательского интерфейса.Я использую styled-component.Когда я локально публикую пакет, используя npm link.Это ошибка.
Объясняется ошибка здесь .
Project
|
+-- node_modules
|
+-- styled-component v4.0.2
|
+-- ui-component
|
+-- styled-component v4.1.1
Есть несколько способов исправить это какесли упомянуть в ссылку .
npm dedupe (Не подходит для среды разработки, так как с npm link не работает). - Настройка вашего веб-пакета (некоторые проекты будут использовать create-реагировать-app, чтобы они не имели доступа к веб-пакет).
У меня есть два, хотя и работает в моей голове.
Во-первых, оба решения заставляют конечного пользователя что-то делать на вашем конце.Я хочу сделать его похожим на другой npm пакет, в котором вы просто устанавливаете и используете его, не говоря пользователю, чтобы он что-то делал на уровне конфигурации.
Во-вторых, почему я должен это делать.Я настроил все в webpack.Я прошу webpack не использовать свою собственную зависимость для конкретного пакета, а использовать пакет конечного пользователя.
Как работают другие пакеты npm, которые зависят от родительской зависимости, но они используют собственную зависимость в devпроцесс.как react
Вот файлы из моей библиотеки компонентов пользовательского интерфейса.
Package.json
{
"name": "ui-component",
"version": "1.0.0",
"description": "Shareable web UI component",
"main": "build/index.js",
"scripts": {
"dev": "start-storybook -p 6006",
"build": "webpack",
"build:storybook": "build-storybook",
"test": "jest --env=jsdom",
"lint": "eslint"
},
"jest": {
"coverageThreshold": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
}
},
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!storybook-static/**/*.{js,jsx}",
"!congif/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/src/enzymeSetup.js"
],
"testMatch": [
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"testPathIgnorePatterns": [
"<rootDir>/__tests__/setup/"
],
"moduleNameMapper": {
"^@theme": "<rootDir>/src/theme.js",
"^@validation": "<rootDir>/src/validation/index.js",
"^@helper": "<rootDir>/src/helper.js"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node",
"mjs"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"npm run lint --fix",
"cross-env CI=true npm test -- --coverage --bail --findRelatedTests"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@material-ui/core": "^3.5.1",
"@material-ui/icons": "^3.0.1",
"react": "^16.6.3",
"react-router-dom": "^4.3.1",
"styled-components": "^4.1.1"
},
"devDependencies": {
"@babel/core": "^7.1.6",
"babel-core": "7.0.0-bridge.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@storybook/addon-actions": "^4.0.7",
"@storybook/addon-centered": "^4.0.7",
"@storybook/addon-info": "^4.0.7",
"@storybook/addon-links": "^4.0.7",
"@storybook/addon-options": "^4.0.7",
"@storybook/addons": "^4.0.7",
"@storybook/components": "^4.0.7",
"@storybook/react": "^4.0.7",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"eslint": "^5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"file-loader": "^2.0.0",
"husky": "^1.1.2",
"jest": "^23.6.0",
"lint-staged": "^8.0.4",
"react-dom": "^16.6.3",
"react-router-dom": "^4.3.1",
"storybook-styled-components": "^1.1.2",
"style-loader": "^0.23.1",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"peerDependencies": {
"react": "^16.5.2",
"styled-components": "^4.1.1"
}
}
webpack
const path = require ('path');
module.exports = {
entry: {
main: './src/index.js',
},
output: {
path: path.resolve(__dirname, './build'),
filename: 'index.js',
libraryTarget: 'commonjs2',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
}],
}
],
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
}
}
}
},
plugins: [],
resolve: {
alias: {
'@theme': path.resolve(__dirname, './src/theme.js'),
'@validation': path.resolve(__dirname, './src/validation/index.js'),
'@helper': path.resolve(__dirname, './src/helper.js'),
}
},
externals: {
'react': 'commonjs react', // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
'styled-components': 'commonjs styled-components' // this line is just to use the React dependency of our parent-testing-project instead of using our own styled-component.
}
}
Мое родительское приложение использует styled-components ^4.0.2, а моя библиотека с совместным доступом с пользовательским интерфейсом использует styled-components "styled-components": "^ 4.1.1".
У меня были записи в peerDependencies какну как в webpack.борясь с этим больше, чем за день, любая помощь будет высоко ценится.