How to create a Node Packages to reuse Style Guide files in frontend? - rollup

Question

In all my projects I make the same configuration, so not to waste time, I would like to create a Node Packages to reuse these configurations.
You can see the hierarchies of my folders:
Inside SRC it will be where the folder of each type of plugin that I will create and use will be, in this case we only have the "style-guide" at the moment.
Within the "style-guide" we have the following file hierarchies:
PS: As I use .husky to run commands in git hooks, I created a package inside this folder.
In the main hierarchy, you can see my configuration files:
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(),
],
},
];
TSCONFIG.JSON
{
"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"
}
}
In the root folder hierarchy (SRC), you can see the index.ts file where all folders and files inside src/* will be exported to the public:
export default "./style-guide/*";
Now the question:
How do I correctly export all these files and folder?
Can I reuse all these style-guide files, especially the .husky using
Node Packages?
Am I doing the configuration correctly?