/ REACT WEBPACK ASP.NET MVC

ASP.NET MVC 專案架構及入口頁面設定

在實際的專案當中，HTML 頁面上很有可能出現以下的程式碼。

Code

直接在頁面上調用 $、React、ReactDOM，由於 jQuery、React、React-dom 都會打包進 Webpack，透過 Webpack 封裝過後，這些第三方套件無法直接在全域取得。所以我們使用 expose-loader 來將這些第三方套件暴露到全域。

首先安裝 expose-loader

npm i expose-loader -D

Webpack 設定檔修改如下

webpack.common.js
module.exports = {
    entry: {
        Vendor: [
            'expose-loader?$!expose-loader?jQuery!jquery',
            'expose-loader?React!react',
            'expose-loader?ReactDOM!react-dom'
        ]
    }
}

這樣即可將第三方套件暴露到全域。

再舉另外一個例子，在 ASP.NET MVC 專案有使用 Reactjs.NET 處理 SSR，因此必須在 cshtml 調用 React Components

@Html.React("App", new
{
    model = Model,
}, containerId: "App", serverOnly: true)

那這些 Components 該如何暴露出來呢？ 如果用 expose-loader 會比較麻煩，這裡可以直接使用 output 設定來處理

webpack.common.js
module.exports = {
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'Resource/Bundle')
    library: 'Components',
  }
}

透過 library 的設定，可以把 Webpack 入口頁面 export 的 Component 暴露到全域底下的 Components 頁面上就可以在 window.Components 調用到 React component

@Html.React("Components.App", new
{
    model = Model,
}, containerId: "App", serverOnly: true)

Github DEMO

2019 IT 邦鐵人賽文章連結