使用 CommonJS 模块和 ES6 模块编译不同应用程序的目录树（每个应用程序一个入口点）答案

【问题标题】：Compile a directory tree of separate apps (one entry point each), using CommonJS modules and ES6 modules使用 CommonJS 模块和 ES6 模块编译不同应用程序的目录树（每个应用程序一个入口点）
【发布时间】：2015-08-19 00:27:50
【问题描述】：

我正在写Couch app。构建过程的输出必须是自包含 JS 文件的目录树，如下所示：

距离 ├── _附件 │ ├── logo.jpg │ └── splash.jpg ├── 列表 │ └── sitemap.js ├── 节目 │ ├── article.js │ ├── home.js │ └──dashboard.js ├── 浏览量 │ ├── 最近 │ │ └── map.js │ ├── 精选 │ │ └── map.js │ └── 统计 │ └── map.js │ └── reduce.js

每个输出的 JS 文件都是一个完整的应用程序，所有导入的模块都内联。每个输入文件都是一个单独的入口点，它将需要 / 从顶级 lib 目录（和 node_modules 或课程）导入模块。然后，Erica 将生成的 dist 目录部署到 Couch（欢迎提供替代建议）。

到目前为止，我已经尝试了以下方法：

使用 Broccoli 编译 Babel（ES7 耶！）。使用 CommonJS 的 require 语句生成 ES5 模块；内联导入的模块需要进一步的构建步骤。
从命令行浏览和丑化。看起来这只是为生成单个输出文件而设计的。
在 makefile 中，分别对每个输入进行 uglify 并将输出发送到 dist 下的匹配目录路径。正在进行的工作，但不是理想的解决方案。

所以，我要回到 Makefiles。它们以异国情调的方式很漂亮，但我真的很想坚持使用现代/基于 JS 的构建过程——比如 Broccoli 或 Gulp（或其他）。有什么建议吗？

更新

我看到 Webpack 可以为多个入口点构建多个输出文件。但是它可以保留输入目录结构吗？

【问题讨论】：

如果我正确理解您的问题，您希望内联 require js 模块以使它们在您的脚本中可用。那正确吗？你可以这样做，但你不需要，因为 couchdb 支持需要 js。这意味着您可以执行var my_lib=require("path-to-some-lib")，它可以与 couchdb 一起使用。
好的，那么我只需要将 ES6 和 CommonJS 模块转换为 RequireJS 模块。你有关于 CouchDB 的模块加载功能的文档的链接吗？除了基于 cmets (kanso) 中的元数据的一些自定义方案之外，我什么也找不到。
我发现this post 非常有用。但是here is the official documentation。希望这会有所帮助:)

标签： build couchdb ecmascript-6 commonjs

【解决方案1】：

Makefile 就是这样。我怀疑这将适用于除 Linux 开发机器之外的任何设备。如果您要发布某些内容供其他人使用，请不要这样做。

这样做是从src 树中的每个设计文档构建一个独立的应用程序。展示文档使用 React 以同构样式呈现页面，有几兆字节。

为了使 CouchDB 能够执行这些应用程序之一，输出 JS 必须评估为实现 CouchDB API 相关部分的全局函数声明。为此，我构建了一个独立的 UMD 模块，它将其输出附加到 global 对象（如果存在）。一个在 CouchDB 中不存在，所以我们在前面添加一个声明，并附加一个表达式来计算我们模块导出的函数：

echo 'global={};' > $(BUILD_DIR)/$*.js
$(BUILD_CMD) --standalone func $(SRC_DIR)/$*.js >> $(BUILD_DIR)/$*.js
echo 'global.func;' >> $(BUILD_DIR)/$*.js

这是整个文件：

SRC_DIR=src
BUILD_DIR=build

SRC := $(shell find $(SRC_DIR) -type f -print)

JS := $(filter %.js, $(SRC:src/%=%))
STATIC := $(filter-out $(JS), $(SRC:src/%=%))

BUILD_CMD=browserify -t babelify -g [ uglifyify -c -m ]
BUILD_DEV_FLAGS=--watch

all: dist

# Deploy to local CouchDB using Erica
# TODO: browser reload
install: $(addprefix $(BUILD_DIR)/, $(JS)) copy
    cd $(BUILD_DIR) && erica push couchra -v

copy: $(addprefix $(BUILD_DIR)/, $(STATIC))

# Transpile JS from ./src to ./build
$(BUILD_DIR)/%.js: $(SRC_DIR)/%.js
    mkdir -p $(dir $(BUILD_DIR)/$*)
    echo 'global={};' > $(BUILD_DIR)/$*.js
    $(BUILD_CMD) --standalone func $(SRC_DIR)/$*.js >> $(BUILD_DIR)/$*.js
    echo 'global.func;' >> $(BUILD_DIR)/$*.js

# Copy static files from ./src to ./build
$(STATIC:%=$(BUILD_DIR)/%): $(STATIC:%=$(SRC_DIR)/%) $(BUILD_DIR)
    mkdir -p $(dir $@)
    cp $(@:$(BUILD_DIR)/%=$(SRC_DIR)/%) $@

$(BUILD_DIR):
    mkdir -p $(BUILD_DIR)

clean:
    rm -Rf $(BUILD_DIR)

.PHONY: clean dist

很可能在某个时候，我会将其转换为纯 shell 脚本并npm run 它们。

需要改进的地方：

从构建中排除常用的库，并使用 CouchDB 的 CommonJS 功能来包含它们。这应该会使设计文档的大小减少一半以上，并允许 Couch 在加载设计文档以处理请求时避免读取大量磁盘。
将渲染代码从显示函数中移出，并移到更新过滤器中。这样，HTML 视图可以在每次更新时创建一次，而不是在每次写入时创建。每个文档将在 renderedViews 成员中包含其自身的几个渲染版本。显示和列表函数将返回或连接并返回此静态标记，这将从服务器端呈现页面的响应时间中消除 React 应用的执行时间。

【讨论】：