Question

src 和 dist 文件夹的原因非常明确：我们更改源代码将其提交到存储库并使用已编译的 dist 文件生产。但你有什么建议开发？我们仍然希望保持src从编译文件中清除，并使其快速查看更改。

在我们刚刚将SAAS编译成CSS并将其放入源代码并保存JS文件之前（不编译一个文件或将它们复制到dist）。现在我们决定重新考虑这个概念。

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

Answer 1

如果我很了解，您正在寻找一种开发架构/工作流程来直接为浏览器提供源代码（并使用DevTools版本功能btw）。事实上，要做到这一点有两件事要做。

1）对于编译/转换语言（ SAAS ， LESS ， TypeScript ，...）和不支持的语言（ES6，ES7），您需要在客户端编译/转换它们。 LESS.js ， typescript.js ， BabelJS 等工具非常适合这样做。我不知道Javascript中的任何SAAS编译器实现。

2）然后，您需要2个不同的html索引。例如，index.hml用于生产，dev.html用于开发。

带有捆绑（dist）文件的

index.html：

<!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 来访问网络应用，并且可以享受在浏览器中拥有源代码的所有好处。没有照顾汇编。

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

希望我帮助过。

如何使用src文件并保持目录清洁（从编译文件）？

1 个答案: