要在C#項目中引入TypeScript支持,您需要創建一個ASP.NET Core項目并配置Webpack以編譯和打包TypeScript文件。以下是詳細的步驟:
安裝Node.js:請確保已經安裝了Node.js。如果沒有,請從官方網站(https://nodejs.org/)下載并安裝。
創建ASP.NET Core項目:使用Visual Studio或命令行工具創建一個新的ASP.NET Core項目。例如,在命令行中運行以下命令:
dotnet new webapp -o MyTypescriptApp
cd MyTypescriptApp
npm init -y
npm install typescript ts-loader webpack webpack-cli --save-dev
tsconfig.json
的文件,并添加以下內容:{
"compilerOptions": {
"outDir": "./wwwroot/js/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
},
"include": [
"./ClientApp/**/*"
]
}
webpack.config.js
的文件,并添加以下內容:const path = require('path');
module.exports = {
entry: './ClientApp/main.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'wwwroot/js')
}
};
創建TypeScript文件:在項目中創建一個名為ClientApp
的文件夾,并在其中創建一個名為main.ts
的文件。您可以在此文件中編寫TypeScript代碼。
修改ASP.NET Core視圖:在Views文件夾中找到一個布局文件(例如_Layout.cshtml
),并在其中添加對生成的JavaScript文件的引用。例如:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script src="~/js/bundle.js"></script>
</body>
</html>
npx webpack
現在,您已經在C#項目中引入了TypeScript支持。當您運行ASP.NET Core應用程序時,它將使用編譯后的JavaScript文件。如果需要,您可以將Webpack配置為在構建過程中自動編譯TypeScript文件。