为 React UI 组件库构建脚本
Build script for react UI component library
我是 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 入门套件的默认设置..这是默认设置 webpack.config：
https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js
如果我 运行 构建脚本作为 /components/index.js 作为入口点，生成的脚本不会提供我需要的东西。
有什么想法吗？
我在 React component boilerplate 中用几种方法处理这个问题。我已尝试涵盖以下基本概念，以便您可以根据需要进行调整。
UM 化 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。我已经 .gitignored 目录。如果它不存在，它将仅包含在已发布的版本中并由 postinstall 脚本按需生成。如果您通过版本控制而不是 npm 使用包，就会发生这种情况。
结论
这些是基本思路。研究 boilerplate 以获得更具体的细节。
我是 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 入门套件的默认设置..这是默认设置 webpack.config： https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js
如果我 运行 构建脚本作为 /components/index.js 作为入口点，生成的脚本不会提供我需要的东西。
有什么想法吗？
我在 React component boilerplate 中用几种方法处理这个问题。我已尝试涵盖以下基本概念，以便您可以根据需要进行调整。
UM 化 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。我已经 .gitignored 目录。如果它不存在，它将仅包含在已发布的版本中并由 postinstall 脚本按需生成。如果您通过版本控制而不是 npm 使用包，就会发生这种情况。
结论
这些是基本思路。研究 boilerplate 以获得更具体的细节。