如何使用 src 文件并保持目录干净（来自已编译的文件）？答案

【问题标题】：How to work with src file and keep the directory clean (from compiled files)?如何使用 src 文件并保持目录干净（来自已编译的文件）？
【发布时间】：2016-04-26 08:28:34
【问题描述】：

拥有 src 和 dist 文件夹的原因很清楚：我们将源代码提交到存储库并使用编译后的 dist 文件生产。但是你有什么建议用于开发？我们仍然希望 src 与编译后的文件保持干净，并使其能够非常快速地查看更改。

在我们只是将 SAAS 转换为 CSS 并将其放入源代码并保持 JS 文件原样之前（无需编译在一个文件中或将它们复制到 dist 中）。现在我们决定重新思考这个概念。

我们正在做网络开发，但我认为问题更广泛。

【问题讨论】：

你试过 webpack-dev-server 吗？
是的，但它编译所有文件对吗？
@STEVER 是的，但是开发服务器将已编译的文件存储/提供到内存/从内存，而不是磁盘。 Read this

标签： javascript webpack src

【解决方案1】：

如果我很好理解，您正在寻找一种开发架构/工作流程来直接为您的浏览器提供源代码（顺便说一句，使用 DevTools 版本的功能）。事实上，要实现这一点，需要做两件事。

1) 对于编译/转译语言（SAAS、LESS、TypeScript、...）和不受支持的语言（ES6、ES7），您将需要在客户端编译/转译它们。 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>

这样，开发人员可以使用 http://localhost/dev.html 访问网络应用程序，并且可以享受在浏览器中拥有源代码的所有好处。不关心编译。

要应用这样的架构，您可能需要调整客户端和/或服务器代码，并构建工具以在两种模式（产品和开发）下工作。

希望我能帮上忙。

【讨论】：