iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

Webpack with ASP.NET MVC系列 第 5

將 Module 暴露到全域

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

Code

直接在頁面上調用 $ReactReactDOM,由於 jQueryReactReact-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


上一篇
使用 Html-Webpack-Plugin 引入 Bundle 檔案
下一篇
Webpack 設定檔配置 Common / Dev / Prod
系列文
Webpack with ASP.NET MVC30

尚未有邦友留言

立即登入留言