使用CommonJS模塊和ES6模塊編譯單獨應用程序（每個入口點）的目錄樹

我正在編寫Couch app。構建過程的輸出必須是自包含的JS文件的目錄樹，就像這樣：使用CommonJS模塊和ES6模塊編譯單獨應用程序（每個入口點）的目錄樹

 
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部署到沙發（歡迎提供替代建議）。

到目前爲止，我已經試過如下：

編譯巴貝爾（ES7耶！），用西蘭花。使用CommonJS require語句生成ES5模塊;需要進一步的構建步驟來嵌入導入的模塊。
Browserify和uglify從命令行。看起來這只是爲了產生一個輸出文件而設計的。
在makefile中，分別對每個輸入進行uglify，並將輸出發送到dist下的匹配目錄路徑。一項正在進行的工作，但不是理想的解決方案。

所以，我即將回到Makefiles。這是一種奇特的方式，但我真的很想堅持現代/基於JS的構建過程 - 就像西蘭花或Gulp（或其他）。建議？

更新

我看到的WebPack可以建立多個進入點多輸出文件。但它可以保留輸入目錄結構嗎？

來源

2015-06-04 Dan Ross

如果我正確理解你的問題，你想要內聯需要js模塊使它們在你的腳本中可用。是對的嗎？你可以這樣做，但你不需要，因爲couchdb支持需要js。這意味着你可以執行'var my_lib = require（「path-to-some-lib」）'，它可以和couchdb一起工作。 –

好吧，那麼我只需要將ES6和CommonJS模塊轉換爲RequireJS模塊。你有鏈接到關於CouchDB的模塊加載功能的文檔嗎？我一直無法找到任何東西，除了一些基於評論中的元數據的自定義方案（kanso）。 –

我發現[這篇文章]（http://caolan.org/posts/commonjs_modules_in_couchdb/）非常有用。但[這裏是官方文檔]（http://wiki.apache.org/couchdb/CommonJS_Modules）。希望這可以幫助：） –

Makefiles它是。我懷疑這隻適用於Linux開發機器。不要這樣做，如果你正在發佈一些東西供其他人使用。

這樣做是從src樹中的每個設計文檔構建一個獨立的應用程序。使用React以同構風格呈現頁面的show docs重達幾兆字節。

爲了使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 [email protected]) 
    cp $(@:$(BUILD_DIR)/%=$(SRC_DIR)/%) [email protected] 

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

clean: 
    rm -Rf $(BUILD_DIR) 

.PHONY: clean dist

它是可能的在某些時候，我會將其轉換爲純shell腳本和npm run它們。

需要改進的地方：

排除常用庫從構建，並使用CouchDB的CommonJS的功能囊括其中。這應該比設計文檔的大小減半，並且允許Couch在加載設計文檔以處理請求時避免讀取大量的磁盤。
將渲染代碼移出顯示功能，並移入更新過濾器。這樣，HTML視圖可以在每次更新時創建一次，而不是在每次寫入時創建。每個文檔將包含renderedViews成員中的幾個呈現版本。顯示和列表函數將返回或連接並返回此靜態標記，這將從服務器端呈現的頁面的響應時間中消除React應用程序的執行時間。

來源

2015-06-18 06:01:55

使用CommonJS模塊和ES6模塊編譯單獨應用程序（每個入口點）的目錄樹

回答

相關問題