爲前端項目設置環境

我正在使用VS代碼開發純前端項目。我有一個打字稿文件夾和另一個文件夾。我正在使用Gulp將它們分別編譯爲js和css文件夾。爲前端項目設置環境

當我嘗試使用var something = require('some-node-module');並在打字稿和瀏覽器控制檯中出現錯誤時，我遇到了問題。我爲此添加了@types，但它不起作用，因爲我仍然在瀏覽器控制檯中出現錯誤。我搜索了更多，發現this的問題，我明白了什麼問題，並從那裏使用了Browserify。現在打字稿沒有錯誤編譯，每當我改變一些東西時，我必須打包。有什麼我可以做的，以擺脫Browserify，仍然可以在打字稿中使用require（）。由於這是我的第一個純粹的前端項目，我希望它保持簡單和乾淨，而不是使用大量的插件/模塊來使其工作。

我tsconfig.json：

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

有什麼辦法，我可以使用類型，而安裝更多的節點模塊，使其工作的需要？

來源

2017-07-07 Chris Rock

當您使用require()或import時，那麼您正在使用模塊。當你使用模塊時，你需要一個模塊捆綁器，比如browserify或者webpack。

但是，您不必在打字稿項目中使用模塊。打字稿編譯器自動將所有單獨的.ts文件連接到一個.js包中。您需要設置在tsconfig.json輸出文件：

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

一個單獨的.ts文件可能是這樣的：

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

使用的模塊不同的是，您的測試類將被放置在全球範圍內，但你可以阻止通過，你把所有的類命名空間：

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

現在只有在全球範圍內被稱爲「遊戲」一個對象，你這樣做不是n使用模塊捆綁器創建單個.js文件。

來源

2017-07-07 12:53:22 Kokodoko

每個前端項目都需要Browserify或Webpack（推薦），這會將您的模塊捆綁到瀏覽器兼容的腳本中。 require()是nodejs'功能，它導入其他模塊/腳本，但它不存在於瀏覽器生態系統中。

Read about webpack here.

來源

2017-07-07 12:57:27

爲前端項目設置環境

回答

相關問題