如何使用src文件並保持目錄清潔（從編譯文件）？

之所以有SRC和DIST文件夾是相當清楚的：我們改變源代碼提交它存儲庫，並使用編譯DIST文件進行生產。但是，你可以推薦什麼開發？我們仍然希望從編譯的文件中保持src乾淨，並快速查看更改。如何使用src文件並保持目錄清潔（從編譯文件）？

在我們剛剛將SAAS轉換爲CSS並將其放入源代碼並保持JS文件原樣（沒有編譯到一個文件中或將它們應用到dist中）之前。現在我們決定重新思考這個概念。

我們正在做網頁開發，但我認爲問題更廣泛。

來源

2016-01-20 Stepan Suvorov

您是否嘗試過使用webpack-dev-server？ –

是的，但它編譯所有文件的權利？ –

@STEVER是的，但dev服務器存儲/提供編譯文件到/從內存，而不是磁盤。 [閱讀本文]（https://webpack.github.io/docs/webpack-dev-server.html） – Matt

如果我很好理解，您正在尋找一種開發架構/工作流程來直接爲瀏覽器提供源代碼（並且使用DevTools版本功能）。事實上，要做到這一點有兩件事情要做。

1）編譯/ transpiled語言（SAAS，LESS，打字稿，...），並支持語言（ES6，ES7），您將需要編譯/ transpile他們在客戶端上。工具如LESS.js,typescript.js,BabelJS是偉大的做到這一點。我不知道JavaScript中的任何SAAS編譯器實現。

2）然後，你需要2個不同的html索引。例如用於生產的index.hml和用於開發的dev.html。

index.html捆綁（DIST）文件：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>App Title</title> 
    <link rel="stylesheet" type="text/css" href="dist/app.bundle.css"> 
    <script type="text/javascript" src="dist/app.bundle.js"></script> 
    </head> 
    <body> 
    ... 
    </body> 
</html>

dev.html所有信號源（SRC）文件：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>App Title (Dev)</title> 
    <link rel="stylesheet/less" type="text/css" href="src/file1.less" /> 
    <script type="text/javascript" src="src/file1.js"></script> 
    <script type="text/javascript" src="src/file2.js"></script> 
    <script type="text/javascript" src="src/file3.js"></script> 
    <script type="text/javascript" src="lib/less.js"></script> 
    </head> 
    <body> 
    ... 
    </body> 
</html>

這樣，開發人員使用訪問Web應用程序，讓我們說http://localhost/dev.html，並可以享受所有善良有源的權利在瀏覽器。沒有照顧編輯。

要應用這樣的體系結構，您可能需要修改客戶端和/或服務器代碼，並且還要構建可在兩種模式（prod和dev）下工作的工具。

希望我幫了忙。

來源

2016-01-22 10:10:05 VPusher

如何使用src文件並保持目錄清潔（從編譯文件）？

回答

相關問題