Question

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

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

我的tsconfig.json：

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

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

Answer 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文件。

Answer 2

每个Front End项目都需要Browserify或Webpack（推荐），它会将您的模块捆绑到浏览器兼容的脚本中。 require()是nodejs＆＃39;导入其他模块/脚本但在浏览器生态系统中不存在的功能。

Read about webpack here.

为前端项目设置环境

2 个答案: