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

Question

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

dist
├── _attachments
│   ├── logo.jpg
│   └── splash.jpg
├── lists
│   └── sitemap.js
├── shows
│   ├── article.js
│   ├── home.js
│   └── dashboard.js
├── views
│   ├── recent
│   │   └── map.js
│   ├── featured
│   │   └── map.js
│   └── stats
│       └── map.js
│       └── reduce.js

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

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

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

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

更新

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

Answer 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 成员中包含其自身的几个渲染版本。显示和列表函数将 return 或连接并 return 此静态标记，这将从服务器端呈现页面的响应时间中消除 React 应用程序的执行时间。

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

Compile a directory tree of separate apps (one entry point each), using CommonJS modules and ES6 modules

couchdb

build

commonjs

ecmascript-6