Ant 套件與 Webpack 之朝代情結

因為專案的關係與 Ant Design 有奇妙的邂逅, Ant Design 可是UI界的設計標準呢。

開始使用Ant 套件後發現頗方便的，尤其現在又結合了React框架。元件範例也都有TypeScript的寫法了! (詳見: https://ant.design/components/overview-cn/)

與React 聯名的意思 XD

開始用Webpack 來打包之後, 卻發現有很多未解之姻緣(?)。

主要是因為Ant 的style底層是用less來寫。因此webpack編譯時需要裝載 less-loader, 爬的文都特別提到 less 也要一起裝，兩個都給他裝起來~!

但裝完之後還是出現其他的問題….

// https://github.com/ant-design/ant-motion/issues/44

.bezierEasingMixin();

^ Inline JavaScript is not enabled. Is it set in your options?

什麼!? less 裡面有 javascript ? 想說上面還附了一串 Github的連結, 以為解答就在這裡了… 經過一段爬文的搜索，看似有解:

loader: "less-loader",
options: {
javascriptEnabled: true
}

但這個解法只適用於less & less-loader3點多的版本… 如果需要在less裡用function來處理，另外寫個 js 來做這些事情是較健康的作法。

但專案內也有自己的less，使用javascriptEnabled: true 就要三思… 因為預設之所以不enable是為了防止 js injection. 預防資安的問題，為了不讓駭客有機趁插入釣魚或怪怪的js。但我們可以下條件指定給特定的套件，再另外寫個 less-loader rule 給內建的 less 即可。

好消息是~less-loader(7.x.x up)至今也有新的做法了!

不用降級版本一樣可以enable js!

module: { rules: [{
    test: /\.less$/,
    use: [
        { loader: "style-loader" },
        { loader: "css-loader" },
        {
            loader: "less-loader",
            options: {
                lessOptions: {
                    javascriptEnabled: true,
                },....
            }
        }
    ]
}]}