[實用] 如何配置 iview 除錯環境

VanMess發表於2018-06-14
View除錯

專案選用 iview 做 UI 元件庫，前前後後用了也差不多一年了，不得不說，質量還是不錯的，遇到的問題並不多。 但偶爾遇到的時候，掌握熟練的除錯技巧還是很有必要的，這裡做個總結，沒什麼高深理論，單純的經驗總結。

1. 在開發環境中使用原始碼

通常，引入 iview 庫的方式如下：

// main.js
import Vue from "vue";
import iview from "iview";

Vue.use(iview);
複製程式碼

從 package.json 檔案來看，入口指向：dist/iview.js。 從該檔案的內容，可以明顯看出這是經過 webpack 編譯的程式碼，程式碼行數達到 38384 行之多，隨便抽取一個片段，是長這樣的：

var Component = Object(
  __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__[
    "a" /* default */
  ]
)(
  __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_tabs_vue___default.a,
  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_8d2761c6_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_tabs_vue__[
    "render"
  ]
);
複製程式碼

這是我們日常使用的 iview 程式碼，單純從呼叫的角度來說，這完全沒有問題，還省效能；但作為除錯就稍顯麻煩，想找個元件的原始碼都麻煩。 所以，這裡做一個小改動，直接從 src 目錄引入 iview：

// main.js
import Vue from "vue";
import iview from "iview/src/index";

Vue.use(iview);
複製程式碼

2. 使用 babel-loader 載入

引入原始碼後，webpack 編譯可能會報錯：

webpack異常資訊截圖

這是因為，通常情況下，為了提升 webpack 編譯速度，我們都會盡可能避免編譯第三方庫，即通過配置 babel-loader ，刻意忽略 node_modules 路徑，以 vue-cli 的 webpack 為例：

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
}
複製程式碼

此時 webpack 會使用其他 loader，比如 script-loader ，載入 iview/src/index.js檔案，就有可能報錯。 因此，如果遇到這個問題，修改 babel-loader 配置將 iview 包含進來即可，形如：

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/iview/src')]
}
複製程式碼

3. 修改 export 方式

修改配置後，重新執行 webpack，會報另一個錯：

匯出包語句異常報警

檢視 iview/src/index.js 檔案，發現匯出語句是這樣的：

module.exports.default = module.exports = API; // eslint-disable-line no-undef
複製程式碼

不知道是為了相容舊版本，還是為了相容其他環境，iview 在這裡選擇 exports 形式匯出包內容，這裡將程式碼改為：

// module.exports.default = module.exports = API; // eslint-disable-line no-undef
export default API;
複製程式碼

到這裡，理論上 iview 的原始碼包已經匯入，可以正常執行了，如果還有遇到其他問題，歡迎留言 歡迎關注我的 github，未來會寫更多的經驗總結

相關文章