如何用NX构建一个由Stencil生成的react lib，用于发布到npm?

Question

我有一个NX单orepo与模板设置。我有我的stencil web组件，我使用stencil生成一个React库。我可以在React应用程序中使用库，通常在同一个repo中。

我希望现在能够构建React库，以便能够将其发布到NPM，以便能够在其他项目中导入它。

我尝试使用Rollup with@nrwl/web: Rollup来构建它，但它只生成一个bundle而不生成包。Json文件，有办法用它来发布吗?我还尝试使用@nrwl/web:webpack，但我找不到正确的配置。正确的NX执行器是什么?Webpack和gulp ?如何配置?

对于angular库，它非常简单，我只使用@nrwl/angular:package。我期待在React中有类似的东西。如果你遇到了这个问题，或者有什么想法，请帮助。

Answer 1

你可以在NX控制台使用@nxext/stencil:make-lib-buildable，如果你使用它，或者CInx generate @nxext/stencil:make-lib-buildable your-components-react --style=scss --no-interactive

检查文档中的importPath

选项将在project中创建一个构建对象。Json，看起来像;

"executor": "@nrwl/rollup:rollup",
"outputs": ["{options.outputPath}"],
"dependsOn": ["^build"],
"options": {
"outputPath": "dist/packages/your-components-react",
"tsConfig": "packages/your-components-react/tsconfig.lib.json",
"project": "packages/your-components-react/package.json",
"entryFile": "packages/your-components-react/src/index.ts",
"external": ["react/jsx-runtime"],
"rollupConfig": "@nrwl/react/plugins/bundle-rollup",
"generateExportsField": true,
"skipTypeField": true,
"format": ["esm", "cjs"],
"compiler": "babel",
"assets": [
{
"glob": "packages/your-components-react/README.md",
"input": ".",
"output": "."
}
]
}
},```
From there you can deploy package with `ngx-deploy-npm` or pipeline or other method.