节点模块中样式组件的几个实例

Question

我正在为可共享的 UI 组件创建一个单独的存储库。我在用styled-component。当我使用本地发布包时npm link。这是抛出错误。

错误在这里解释。

Project
 |
 +-- node_modules
    |
    +-- styled-component v4.0.2
    |
    +-- ui-component 
        |
        +-- styled-component v4.1.1

有几种方法可以修复它，就像链接中提到的那样。

1. npm dedupe（不适合开发环境，因为它不能很好地工作npm link）。
2. 设置您的 webpack（某些项目将使用 create-react-app，因此他们无权访问 webpack）。

我心里有两个想法。

首先，这两种解决方案都迫使最终用户在您这边做某事。我想让它像其他npm包一样，您只需安装和使用它，而不告诉用户在配置级别执行某些操作。

其次，为什么我必须这样做。我已经把一切都设置好了webpack。我要求webpack不要使用它自己的特定包的依赖项，而是使用最终用户包。

其他npm包的工作方式取决于父依赖项，但它们在开发过程中使用自己的依赖项。喜欢react

这是我的可共享 UI 组件库中的文件。

包.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"
  }
}

网络包

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，我的可共享 ui 库使用样式组件“styled-components”：“^4.1.1”。

peerDependencies我在和 中都有条目webpack。挣扎了一天多，任何帮助将不胜感激。

Answer 1

请参阅官方样式组件文档中的常见问题解答条目。在大多数情况下，向 webpack 配置添加别名足以解决该问题：

  resolve: {
+   alias: {
+     "styled-components": path.resolve("./node_modules", "styled-components"),
+   }
  }