javascript - Webpack 无冗余导出所有组件

Question

我有以下目录结构：

- modules/ |
           |--- a
                |---- p.jsx
                |---- a_directory/not_to_export.jsx
                |-----q.jsx
           |   
           |--- b
                |---- r.jsx
                |-----s.jsx
           |
           |--- c
                |---- t.jsx

一个简单的问题是 - 如何在 webpack 中导出每个模块及其路径，以便在 webbrowser 中使用。

示例：require('a/p.jsx')应该返回对 p 模块的引用。

更详细的目标：

• 每个顶级 jsx 都应该被视为一个模块，例如：a/p.jsx, a/q.jsx, b/r.jsx, b/s.jsx, c/t.jsx.
• 所有这些模块实际上都应该使用它们的路径来引用，例如：在 b/r.jsx 中，我想访问a/p.jsx.
• 一切都编译成一个 jsx，基本上要求语句是同步的。
• 如果可能的话，缓存的构建
• require 应该被导出，就像在构建之外，我应该能够加载一个组件，例如：require("a/p.jsx")可以在构建之外使用，而不仅仅是入口点的导出。

这种行为与 brunch 产生的非常相似，唯一的问题是 brunch 不支持条件 require/import 语句。

标签： javascriptreactjswebpack

Answer 1

• 每个顶级 jsx 都应该被视为一个模块，例如：a/p.jsx, a/q.jsx, b/r.jsx, b/s.jsx, c/t.jsx.

• 所有这些模块实际上都应该使用它们的路径来引用，例如：在b/r.jsx，我想访问a/p.jsx。

要配置 wepack 如何解析绝对路径，请参见resolve 选项。您必须将模块文件夹添加到解析器。所以在你的 webpack 配置中添加：

module.exports = {
  //...
  resolve: {
    modules: ['node_modules', 'modules']
  }
};

我假设您的modules文件夹与您的文件夹处于同一级别node_modules。

• 一切都编译成一个jsx，基本上要求语句是同步的。

• 需要出口。

要构建与 node js 一起使用，请使用target选项：

module.exports = {
  target: 'node'
};