修改element-ui源码如何在项⽬中引⽤
起因
因为准备看element-ui的源码，会做⼀些笔记，在源码中写⼀些注释，甚⾄对源码进⾏⼀些⾃定义的修改来查看运⾏效果。
所以element-ui的⽂件夹不能直接npm install放在node_modules⽂件夹下⾯，node_modules⽂件夹⼀般是不同步到svn上的，放在⾥⾯的话在另⼀个电脑上可能重新安装项⽬⾃⼰的修改就没有了。
对引⼊的外部组件，如果要⾃定义修改，那么都不能放在node_modules下。
过程中遇到的⼀些问题记录⼀下。
element-ui贡献指南：
vue脚⼿架安装
vue init webpack element-learn
cd element-learn
npm install
npm run dev
⼀步步来，建好初始的⽂件夹。
引⼊element-ui
下载⼀个master分⽀。在src⽂件夹下建⽴⼀个element-ui⽂件夹，将下载的分⽀解压到该⽂件夹下。
此时尝试在main.js中引⼊element-ui：
import elementUI from ‘./element-ui’;
Vue.use(elementUI);
报错：This relative module was not found:
./element-ui in ./src/main.js
这是因为我们直接下载过来的element-ui没有经过编译。
node模块机制从element-ui包的package.json中的读到的⼊⼝⽂件不存在。所以⾸先要⾃⼰编译element-ui源代码。
到element-ui中的操作
cd E:\vue\element-learn\src\element-ui
npm install
npm run dev
然后访问
可以看到⽰例。
跟官⽹
基本是⼀样的。我们也可以直接到这个⽰例中去修改组件，查看效果。毕竟实时编译。
然后是编译，也就是⽣成我们项⽬中会使⽤到的⽂件。
npm run dist
有可能会报错package.json does not exist, have you run lerna init?
npm install lerna⼀下。
有时候还会有些别的错误，把node_modules删除了重新npm install就好。
编译完之后我们就看到多了⼀个lib⽂件夹。⾥⾯就是编译⽣成的⽂件。
然后
cd E:\vue\element-learn
npm run dev
报这个：
[BABEL] Note: The code generator has deoptimised the styling of “E:/vue/element-learn/src/element-ui/lib/element-uimon.js” as it exceeds the max of “500KB”.
不过不⽤管它，这个不影响。
后⾯还有报错
* element-ui/lib/button in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/button-group in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/checkbox in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/checkbox-group in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/input in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/input-number in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/locale in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/mixins/emitter in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/mixins/locale in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/mixins/migrating in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/option in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/progress in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/scrollbar in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/select in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/tag in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/tooltip in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/transitions/collapse-transition in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/utils/clickoutside in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/utils/date in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/utils/dom in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/utils/merge in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/utils/popup in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/utils/resize-event in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/utils/scroll-into-view in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/utils/scrollbar-width in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/utils/shared in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/utils/util in ./src/element-ui/lib/element-uimon.js
vue element admin* element-ui/lib/utils/vdom in ./src/element-ui/lib/element-uimon.js
* element-ui/lib/utils/vue-popper in ./src/element-ui/lib/element-uimon.js
说明两点：1.element-ui的⼊⼝⽂件到了。2.⼊⼝⽂件中路径配置可能有问题。
路径问题分析
⾸先我们到⼊⼝⽂件lib/element-uimon.js，
发现⾥⾯有很多类似这样的模块引⼊：ports = require(“element-ui/lib/select”);
这个路径⽐较奇怪的是element-ui这⼀段是哪⾥来的，它怎么就知道我的⽬录是叫这个名字。于是我修改了⽬录名重新编译，发现这个⽂件⾥的路径还是这样。
然后我把名字改回来，把⽂件夹移动到node_moudule下，import elementUI from ‘element-ui’;
发现能正常运⾏。所以编译的包应该是没有问题的。问题在路径上。
然后⽂件夹移回去，到element-ui的build⽂件夹搜索⼀下element-ui。果然发现了不少element-ui。
关键在config.js中这⾥
exports.alias = {
main: solve(__dirname, '../src'),
packages: solve(__dirname, '../packages'),
examples: solve(__dirname, '../examples'),
'element-ui': solve(__dirname, '../')
};
可以看到element-ui是这个路径的别名。所以element-ui这⾥的webpack是可以识别它的。⽽我们项⽬的的webpack是识别不了它的。
那么放到node_modules⽂件夹下，为什么可以正常识别这个路径呢，根据nodejs的模块搜索机制，npm install下来的它的⽂件夹名字也是element-ui。这个时候element-ui不是⼀个别名。
直接引⼊node_modules中的模块，引⼊⽅式是import elementUI from ‘element-ui’，那么lib/element-uimon.js中的’element-ui’就直接对应到element-ui的根⽬录了。
所以在我们项⽬的webpack配置f.js中增加别名配置element-ui，把’element-ui’指向我们项⽬中element-ui根⽬录的位置src/element-ui:
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'element-ui':resolve('src')+'/element-ui'
}
然后重新运⾏ npm run dev。运⾏成功。
于是我们的webpack也能正常地识别lib⽂件夹⾥⽂件中’element-ui’的路径了。
结尾
然后如果我们修改了element-ui的源码，只要编译⼀下就可以正常在我们⾃⼰的项⽬中应⽤了。
不过还有⼀点不好的地⽅就是我们没有对element-ui源码进⾏实时的编译，我们项⽬引⽤的是它编译过后的⽽不是真正的源代码，也就是没有把它⾃⼰的实时编译过程写到我们的项⽬webpack的配置中来。所以我们项⽬中npm run dev的时候并不能实时监测到我们对element-ui源码的修改。这⼀点后⾯再优化。
对于⼀些常见项⽬的脚⼿架，其实应该好好学习⼀下。以后再遇到⽂件路径问题，各种配置问题会得⼼应⼿很多。
顺便推书《深⼊浅出nodejs》《深⼊理解es6》。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。