为前端项目建立一个环境

Question

我正在使用VS代码进行一个纯粹的前端项目。我有一个打字夹，另一个是sass的文件夹。我正在为js和css在单独的文件夹中编译那些带Gulp的内容。

当我尝试使用var something = require('some-node-module');时，我遇到了一个问题，并且在类型记录和浏览器控制台上都出现了错误。我为此添加了@type，但它没有工作，因为浏览器控制台中仍然有一个错误。我搜索了更多，找到了这问题，我明白了问题的所在，然后我使用了Browserify。现在，类型记录是在编译时没有错误的，每次更改时，我都要做一个包。我能做些什么来摆脱Browserify，并且仍然能够在类型记录中使用require()吗？由于这是我的第一个纯粹的前端项目，我希望保持它的简单和干净，而不是使用大量的插件/模块来使它工作。

我的tsconfig.json：

{
"files": [
    "ts/main.ts"     
],
"compilerOptions": {
    "noImplicitAny": true,
    "target": "es5",
    "outDir": "js"
}
}

我是否可以使用类型而不需要安装更多的节点模块来使其工作呢？

Answer 1

当您使用require()或import时，您将使用模块。当您使用模块时，您需要一个模块绑定器，例如浏览器化或webpack。

但是，您不必在类型记录项目中使用模块。类型记录编译器会自动将所有单独的.ts文件连接到一个.js包中。您需要在tsconfig.json中设置输出文件：

{
    "compilerOptions": {
        "sourceMap":  true,
        "removeComments": true,
        "target":"es5",
        "out": "dist/js/main.js"
    }
}

一个单独的.ts文件可能如下所示：

class Test {
   constructor(){
      console.log("hi!");
   }
}

使用模块的不同之处在于，Test类将被放置在全局范围内，但可以通过使用将所有类放置在其中的命名空间来防止这种情况：

namespace Game {
    export class Test {
       constructor(){
          console.log("hi!");
       }
    }
}

现在，在全局范围内只有一个名为“Game”的对象，您不需要模块绑定器来创建单个.js文件。

Answer 2

每个前端项目都需要Browserify或Webpack (推荐)，这将将您的模块绑定到与浏览器兼容的脚本中。require()是nodejs的函数，它导入其他模块/脚本，但在浏览器生态系统中不存在。

在这里读到webpack的故事。