为前端项目设置环境



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

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

My tsconfig.json:

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

有什么方法可以在不需要安装更多节点模块的情况下使用类型来使其工作?

当你使用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文件。

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

在此处阅读有关 webpack 的信息。

最新更新