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 yay！）编译。使用CommonJS require语句生成ES5模块;需要进一步构建步骤来内联导入的模块。
从命令行进行Browserify和uglify。看起来这只是为了生成单个输出文件。
在makefile中，单独uglify每个输入并将输出发送到dist下的匹配目录路径。正在进行的工作，但不是理想的解决方案。

所以，我即将回到Makefiles。这是异国情调的美丽，但我真的很想坚持现代/基于JS的构建过程 - 像Broccoli或Gulp（或其他）。建议？

更新

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

Answer 1

Makefiles吧。我怀疑除了Linux开发机之外什么都行不通。如果您要发布供其他人使用的内容，请不要这样做。

这样做是从src树中的每个设计文档构建一个独立的应用程序。 show docs使用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。

需要改进的地方：

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

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

1 个答案: