前言
在前端开发过程中，我们必不可少地要写一些组件或者库。使用 npm 管理这些组件或库已经成为了一个不二之选。而在使用这些组件或库时，我们需要查看它们的源码以便更好地理解它们的工作原理。今天，我来介绍一款方便查看 npm 包源码的工具：source-pane。
安装
在项目中使用 source-pane 非常简单，只需要通过 npm 安装即可：
npm install source-pane --save-dev
使用
在安装完 source-pane 后，你需要在 webpack 的配置文件或者 Vue CLI 中的 vue.config.js 文件中添加对应的插件，在这里以 Vue CLI 为例，示例代码如下：
module.exports = {
chainWebpack: config => {
if (process.env.NODE_ENV !== 'production') {
config.plugin('source-pane').use(require('source-pane-webpack-plugin'));
}
}
}然后，在开发模式下启动项目，你就能够在浏览器中看到一个名为 “source pane” 的页面了。只需要点击需要查看源码的模块即可查看其源代码。
总结
使用 source-pane 可以方便地查看 npm 包的源码，从而更好地理解其工作原理。在使用 source-pane 时需要注意，该工具只能在开发模式下可用。另外，在 webpack 的配置文件或者 Vue CLI 中的 vue.config.js 文件中添加对应的插件也是必须的。希望这篇文章对你有所帮助，谢谢阅读。
示例代码
-- -------------------- ---- -------
------ ---------- ---- --------------
-- ---
------ ------- -
-- ---
----------- -
----------
--
-- ---
--- -------------------- ---- -------
----------
---- ----- ------- ---
------------ -----------------
--------- ---------
------------ --
-----------
--------------
---- ----- ------- ---
-----------
--------
------ ----------- ---- -------------------------------
------ ------- -
-- ---
----------- -
-----------
--
--------- -
-------- -
------ ----------------------------------------------------
--
--
-- ---
--
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/72285