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，都应该被视为一个模块 ex: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 不支持条件要求/导入语句。

Answer 1

• Each top-level jsx, should be treated as a module ex: a/p.jsx, a/q.jsx, b/r.jsx, b/s.jsx, c/t.jsx.

• All these modules should be actually be referenced using their paths like: in b/r.jsx, I want to access a/p.jsx.

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

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

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

• Everything compiled to a single jsx, basically require statement to be synchronous.

• require exports.

要构建与节点 js 一起使用，请使用 target选项:

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