The project uses iView as the UI component library, which has been used for almost a year. It has to be said that the quality is good and there are not many problems. But occasionally encounter, master skilled debugging skills or very necessary, here to make a summary, no profound theory, simple experience summary.

1. Use source code in your development environment

In general, iView libraries are introduced as follows:

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

Vue.use(iview);
Copy the code

From the package.json file, the entry points to: dist/ iView.js. From the contents of the file, it is clear that this is Webpack-compiled code with 38384 lines of code. A random snippet looks like this:

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_8d276 1c6_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_tabs_vue__["render"]);Copy the code

This is the iView code that we use every day. Purely from a call point of view, this is no problem at all, and it saves performance; But as a debugging is slightly troublesome, want to find a component of the source are troublesome. So, a small change here is to import the iView directly from the SRC directory:

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

Vue.use(iview);
Copy the code

2. Use babel-loader to load files

After importing source code, webpack compilation may report an error:

This is because, in general, in order to speed up webpack compilation, we avoid compiling third-party libraries as much as possible by configuring babel-loader and deliberately ignoring the node_modules path. Take vue-CLI webpack as an example:

{
  test: /\.js$/.loader: 'babel-loader'.include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]}Copy the code

In this case, webpack will use another loader, such as script-loader, to load the iView/SRC /index.js file, and there may be an error. Therefore, if you encounter this problem, modify the babel-loader configuration to include iView as follows:

{
  test: /\.js$/.loader: 'babel-loader'.include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/iview/src')]}Copy the code

3. Change the export mode

If you run webpack again after modifying the configuration, you will get another error:

Look at the iview/ SRC /index.js file and find that the export statement looks like this:

module.exports.default = module.exports = API; // eslint-disable-line no-undef
Copy the code

Iview exports package contents from exports to exports

// module.exports.default = module.exports = API; // eslint-disable-line no-undef
export default API;
Copy the code

At this point, the source code package of iView has been imported in theory, it can run normally, if there are other problems, welcome to leave a message welcome to follow my Github, I will write more experience summary in the future