element源码修改,为依赖打补丁

最新推荐文章于 2024-09-06 16:51:27 发布

jasonjkj

最新推荐文章于 2024-09-06 16:51:27 发布

阅读量1.2k

点赞数

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/jasonjkj/article/details/108410458

版权

VUE 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了Element UI组件库的定制与修改方法，包括使用patch-package插件修改node_modules，直接下载并替换依赖，以及通过配置Webpack别名实现文件重定向。提供了详细的步骤与注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章参考链接:https://juejin.im/post/5ec381215188256d776342cd ...

1.使用插件

使用patch-package来修改node_modules

参考文章:https://www.jianshu.com/p/ebcbac8d952d

问题:

1.使用这种写法,没办法编译

node_module 下面的element 包,没办法直接安装依赖执行编译

2. 你直接去改webpack 打包后的,最终文件,看不懂代码

3. 直接替换lib 下面的所有数据, 插件报错了特么的

总之:对于修改element 来说不建议使用

中间遇到的问题:

package-lock.json 文件,不存在

导致无法使用 npx patch-package element-ui

解决方法:

后来更新了npm到最新版本，npm i

npm install -g npm npm i

提示,不要用 cnpm 特么的莫名其妙的问题 ...

npx patch-package element-ui

"postinstall": "patch-package"

2.直接下载github 项目, 替换依赖的方法:

clone https://hub.com/ElemeFE/element.git
npm install
修改文件
npm run dist
找到你的项目中的node_modules包下的element-ui文件夹下的lib包，用你修改好后打包生成的lib包进行替换即可生效

3.直接替换的方式,别人下载依赖的时候也要替换吗 ??

于是 ,查看element 的文件入口 :

这就是编译完之后的数据 ,于是 ,做拦截, 重定向到我们自己修改的文件下,就行了

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '/static': resolve('static'),
      './lib/element-ui.common.js':resolve('static')+'/lib/element-ui.common.js'
    }
  },

如果你是vue-cli3 之后的,脚手架

参看这个:https://www.cnblogs.com/baixiaoxiao/p/12964170.html

const path = require('path');
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('./patchers', path.resolve(__dirname, 'src/assets/patchers.js'))
  }
};