.NET 6 Razor Pages项目如何配置Webpack打包TypeScript？

你之前的写法跑不通核心有两个问题：一是直接引用tsc编译的零散js文件，浏览器无法直接识别裸import/export的模块依赖；二是模块内部定义的AAA函数默认在模块作用域，不会暴露到全局，页面内联脚本根本拿不到这个方法。Webpack的作用就是把所有带依赖关系的前端资源打包成浏览器可直接运行的静态文件，按下面步骤配置就行：

1 初始化前端工程配置 #

在.NET项目根目录（和Program.cs、.csproj文件同级）打开终端，执行以下命令初始化npm环境并安装依赖：

npm init -y
npm install webpack webpack-cli ts-loader typescript --save-dev

2 编写配置文件 #

Webpack配置 #

根目录新建webpack.config.js，配置入口、加载规则、输出路径：

const path = require('path');

module.exports = {
  // 你的TS主入口文件
  entry: './ts/file.ts',
  mode: 'development',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    // 打包后的文件直接输出到wwwroot/js目录，Razor Pages默认可直接访问该目录下的静态资源
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'wwwroot/js'),
    clean: true,
  },
};

TS配置 #

根目录新建tsconfig.json（如果已有就修改对应配置）：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["ts/**/*"]
}

3 添加打包脚本 #

修改根目录下package.json的scripts节点，新增开发和生产打包命令：

"scripts": {
  "dev": "webpack --watch",
  "build": "webpack --mode production"
}

--watch参数会监听TS文件变动，保存后自动重新打包，开发时不用手动重复执行命令。

4 修改现有代码 #

你原来的AAA函数是模块内部函数，需要暴露到全局才能被页面内联脚本访问，修改ts/file.ts：

import { CCC } from "./file1"

// 挂载到window全局作用域
(window as any).AAA = function (): string {
  return CCC();
}

ts/file1.ts不需要修改，webpack会自动处理依赖导入。

5 修改视图层脚本引用 #

把_Layout.cshtml里原来引用的~/ts/file1.js、~/ts/file.js两个脚本标签删掉，换成打包后的bundle引用，建议把脚本标签放到@RenderBody()之后，避免阻塞页面渲染：

<body>
    @RenderBody()

    <script src="~/js/bundle.js" asp-append-version="true"></script>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>

你的Index.cshtml里的内联脚本不需要修改，只要bundle.js加载完成就能正常调用AAA方法。

6 运行验证 #

终端先执行npm run dev，等webpack打包完成后，正常启动.NET项目即可，打开首页会正确弹出AAAAAA的提示。

注意事项 #

• 不要把ts源码目录下编译出来的零散js文件直接放到wwwroot下引用，所有前端资源都走webpack打包，只需要引用最终输出的bundle文件。
• 生产环境发布前执行npm run build，会自动生成压缩混淆后的bundle文件，体积更小加载更快。
• 后续如果要集成CSS、图片、字体等前端资源，只需要在webpack配置里加对应loader，输出路径统一放到wwwroot对应目录即可，不需要额外修改.NET的静态文件配置。

内容的提问来源于stack exchange，提问作者navid