为反应UI组件库构建脚本

Question

我是Webpack的新手并且说实话它仍然让我感到困惑。我想从我的react版本创建一个可共享的UI组件库（使用react-starter-kit作为它的基础）。有没有办法配置我的webpack配置输出文件，然后我可以作为NPM模块导入到另一个项目并导入组件？

当前设置源文件夹：

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

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

如果我将构建脚本作为/components/index.js作为入口点运行，那么生成的脚本并不能满足我的需要。

有什么想法吗？

Answer 1

我在React component boilerplate中以两种方式处理此问题。我试图涵盖下面的基本想法，以便您可以根据需要进行调整。

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使用包，则会发生这种情况。

结论

这些是基本的想法。研究boilerplate以获取更具体的细节。