【轉】Webpack 中配置的 alias 在 Mocha 測試用例中

背景

在日常開發中，有些模組層級太深，在使用的時候可能會寫成

import mod from '../../../../a/deep/folder/mod'

為了解決這種問題，我們使用 webpack 的  能力，對目錄進行命名：

{
    resolve: {
        alias: {
             mod:  path.resolve(__dirname, 'src/a/deep/folder/mod')
        }
    }
}

在使用中，可以直接使用下面這種方式引入

import module from 'mod'

問題

蛋疼的地方來了

使用 Mocha 進行單元測試：

mocha --compilers js:babel-core/register test/specs/**/*Test.js

我們透過 Babel 進行編譯後測試，遇到了問題，Mocha 並不能讀取到 Webpack 內配置的 alias，所以一直提示找不到 mod 模組。

module.js:557
    throw err;
    ^

Error: Cannot find module 'mod'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
...

解決

搜尋了各種方案，在一個不起眼的地方看到了一個方案，使用 Babel 外掛：

.babelrc 檔案

"plugins": [
    [ "babel-plugin-webpack-aliases", { "config": "./webpack.config.test.js" } ]
]

在 Mocha 測試之前會透過 Babel 進行編譯，編譯時會透過 babel-plugin-webpack-aliases 外掛以支援 webpack 中的 alias。

其他解決方案

 在 Mocha 測試之前，透過 webpack 進行預編譯。

版權宣告 

本部落格文章均為  原創或翻譯，採用進行許可。 
原文地址：