4

我是 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 作为入口点运行，则生成的脚本不会给我我需要的东西。

有任何想法吗？

4

1 回答 1

3

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

UMDdist版本

将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，但我发现这个选项更整洁，因为它提供了更多的灵活性。这样做时，您可以在入口点之外导入功能。

为此，我将其设置如下：

包.json

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

这告诉 Babel 拿起我的源代码并将其写入./dist-modules. 我有.gitignore目录。它将仅包含在已发布的版本中，postinstall如果它不存在，则由脚本按需生成。如果您通过版本控制而不是 npm 使用包，则可能会发生这种情况。

结论

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

于 2016-04-23T18:54:53.247 回答