阅读量:0
要在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
- 添加TypeScript支持:在项目根目录下运行以下命令,以安装TypeScript和Webpack相关的依赖项:
npm init -y npm install typescript ts-loader webpack webpack-cli --save-dev
- 配置TypeScript:在项目根目录下创建一个名为
tsconfig.json
的文件,并添加以下内容:
{ "compilerOptions": { "outDir": "./wwwroot/js/", "sourceMap": true, "noImplicitAny": true, "module": "es6", "target": "es5", "jsx": "react", "allowJs": true }, "include": [ "./ClientApp/**/*" ] }
- 配置Webpack:在项目根目录下创建一个名为
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>
- 编译和打包TypeScript:在项目根目录下运行以下命令,以使用Webpack编译和打包TypeScript文件:
npx webpack
现在,您已经在C#项目中引入了TypeScript支持。当您运行ASP.NET Core应用程序时,它将使用编译后的JavaScript文件。如果需要,您可以将Webpack配置为在构建过程中自动编译TypeScript文件。