构建react组件库脚本

Question

我是Webpack的新手，老实说，这还是让我有点困惑。我想要创建一个可共享的UI组件库从我的反应构建(使用作为基础的react kit)。有没有一种方法可以将我的webpack配置配置为输出文件，然后作为NPM模块导入到另一个项目并导入组件？

当前安装源文件夹：

├── /src/                   # The source code of the application
│  ├── /components/         # React components
│  │   ├── /ComponentName   # Component
│  │   ├── index.js         Exports all components

使用react工具包的默认设置。它是默认的webpack.config：https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js

如果我将构建脚本作为/components/index.js作为入口点运行，则生成的脚本不会给出我所需要的。

有什么想法吗？

Answer 1

我在我的反应组分样板中用几种方式来处理这个问题。我试图涵盖以下的基本想法，以便您可以根据需要进行调整。

UMDified dist版本

将output.libraryTarget设置为umd。这将编写一个包装器，您可以从不同的环境(AMD，CommonJS，全局)导入。将output.library设置为与库的全局名称匹配。

webpack.config.js

output: {
  path: path.join(__dirname, 'dist'),
  libraryTarget: 'umd',
  library: 'MyAwesomeLibrary'
}

我已经建立了一个独立的目标，以产生一个非小型化和小型化的版本我的组成部分。我在发布时将这些内容包含到版本控制中，这样人们就可以很容易地找到和使用它们。

通过Babel的节点版本

为了方便地通过Node和Webpack使用这个包，我用Babel来处理我的代码，而不是Webpack。这使文件结构保持不变。或者，您可以只指向生成的dist，但是我发现这个选项更整洁，因为它提供了更多的灵活性。在这样做时，您可以在入口点之外导入特性。

为了实现这一点，我将其设置如下：

package.json

"scripts": {
    "dist:modules": "babel ./src --out-dir ./dist-modules"
}

这告诉Babel拿起我的源代码并将其写到./dist-modules。我已经查到.gitignore目录了。如果postinstall脚本不存在，它将只包含在已发布的版本中，并根据需要生成。如果您通过版本控制而不是npm使用包，则会发生这种情况。

结论

这些都是基本的想法。研究样板获得更多的具体细节。