为前端项目设置环境答案

【问题标题】：Setting up an environment for a frontend project为前端项目设置环境
【发布时间】：2017-12-11 16:29:46
【问题描述】：

我正在使用 VS Code 开发一个纯前端项目。我有一个用于打字稿的文件夹和另一个用于 sass 的文件夹。我正在使用 Gulp 将它们编译到 js 和 css 的单独文件夹中。

我在尝试使用 var something = require('some-node-module'); 时遇到了问题，并且在打字稿和浏览器控制台中都出现了错误。我为此添加了@types，但它没有起作用，因为我在浏览器控制台中仍然出现错误。我进行了更多搜索，发现this 问题，我了解问题所在，并从那里使用了Browserify。现在打字稿编译没有错误，每次我改变一些东西时我都必须做一个包。我可以做些什么来摆脱 Browserify 并且仍然可以在 typescript 中使用 require() 。因为这是我的第一个纯前端项目，所以我希望它保持简单和干净，而不是使用大量插件/模块来使其工作。

我的 tsconfig.json：

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

有什么方法可以使用类型而不需要安装更多的节点模块来使其工作？

【问题讨论】：

标签： typescript sass gulp visual-studio-code typescript-typings

【解决方案1】：

当您使用require() 或import 时，您正在使用模块。当您使用模块时，您需要一个模块捆绑器，例如 browserify 或 webpack。

但您不必在打字稿项目中使用模块。 typescript 编译器已经自动将所有单独的 .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 文件。

【讨论】：

【解决方案2】：

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

Read about webpack here.

【讨论】：