webpack 如何用NX构建一个由Stencil生成的reaction库,用于发布到npm?

np8igboo  于 2023-03-08  发布在  Webpack
关注(0)|答案(1)|浏览(170)

我有一个NX monorepo,带有Stencil设置。我有我的模具Web组件,并且我使用Stencil生成了一个React库。我可以在同一个repo中正常使用React应用程序中的库。
我希望现在能够构建React库,以便能够将其发布到NPM,从而能够将其导入到其他项目中。
我尝试使用**@nrwl/web:rollup来构建它,但是它只生成了一个没有package.json文件的捆绑包,有没有办法使用它来发布呢?我也尝试使用@nrwl/web:webpack**,但是我找不到正确的配置。什么是正确的NX执行器来做这个?Webpack和gulp可能吗?如何配置它?
对于Angualr库,它非常简单,我只是使用了**@nrwl/angular:package**。我期待在React中出现类似的情况。如果您遇到了这个问题,请提供帮助,或者有一个想法。

jq6vz3qz

jq6vz3qz1#

如果您使用@nxext/stencil:make-lib-buildable,则可以从NX控制台或CI nx 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.

相关问题