阅读 1214

[实用] 如何配置 iview 调试环境

项目选用 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-cliwebpack 为例:

{
  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,未来会写更多的经验总结

关注下面的标签,发现更多相似文章
评论