汇总-如何创建节点包以重用前端中的样式指南文件？

在我所有的项目中，我都进行了相同的配置，所以为了不浪费时间，我想创建一个节点包来重用这些配置。

里面SRC将是我将创建和使用的每种插件的文件夹所在的位置，在这种情况下，我们目前只有“ style-guide”。

在“ style-guide”中，我们有以下文件层次结构。

PS：当我使用.huskygit hooks 运行命令时，我在这个文件夹中创建了一个包。

在主层次结构中，您可以看到我的配置文件：

ROLLUP.CONFIG.JS

import { babel } from "@rollup/plugin-babel";
import { terser } from "rollup-plugin-terser";
import external from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import scss from "rollup-plugin-scss";
import typescript from "@rollup/plugin-typescript";

export default [
  {
    input: "./src/index.ts",
    output: [
      {
        file: "dist/index.js",
        format: "cjs",
      },
      {
        file: "dist/index.es.js",
        format: "es",
        exports: "named",
      },
    ],
    plugins: [
      scss({
        output: true,
        failOnError: true,
        outputStyle: "compressed",
      }),
      babel({
        exclude: "node_modules/**",
        presets: ["@babel/preset-react"],
      }),
      external(),
      resolve(),
      typescript(),
      terser(),
    ],
  },
];

{
  "compilerOptions": {
    "target": "es5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "module": "esnext" /* Specify what module code is generated. */,
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
    "resolveJsonModule": true /* Enable importing .json files. */,
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    "strict": true /* Enable all strict type-checking options. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", "build", "coverage"]
}

PACKAGE.JSON

{
  "name": "Frontend.NodePackages",
  "license": "MIT",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "files": [
    "./dist"
  ],
  "scripts": {
    "build": "rollup -c"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.1",
    "@testing-library/user-event": "^12.2.0",
    "@types/jest": "^26.0.24",
    "@types/node": "^14.14.6",
    "@types/react": "^17.0.5",
    "@types/react-dom": "^17.0.4",
    "@types/react-router-dom": "^5.1.6",
    "@types/styled-components": "^5.1.4",
    "@typescript-eslint/eslint-plugin": "^4.6.1",
    "@typescript-eslint/parser": "^4.6.1",
    "babel-jest": "^27.1.1",
    "babel-preset-react-app": "^10.0.0",
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.0.0",
    "jest": "^27.1.1",
    "jest-cli": "^27.1.1",
    "jest-watch-typeahead": "^0.6.1",
    "jsdom": "^16.4.0",
    "react-app-polyfill": "^2.0.0",
    "typescript": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.18.9",
    "@babel/preset-react": "^7.18.6",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-typescript": "^8.3.3",
    "@types/react": "^18.0.15",
    "rollup": "^2.77.2",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-scss": "^3.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "tslib": "^2.4.0"
  }
}

在根文件夹层次结构中(SRC)，您可以看到index.ts所有文件夹和文件所在的文件src/*将导出到公众：

export default "./style-guide/*";

现在的问题是：

1. 如何正确导出所有这些文件和文件夹？
2. 我可以重用所有这些样式指南文件，特别是使用节点包的.husky吗？
3. 我的配置正确吗？