Element UI 组件库分析和二次开发_make new &lt；component-name&gt；

2401_84619606

于 2024-05-15 21:08:04 发布

阅读量940

点赞数 7

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84619606/article/details/138923610

版权

程序员专栏收录该内容

93 篇文章 0 订阅

订阅专栏

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux

主要是处理样式相关的脚本。拆开来分析下：

node build/bin/gen-cssfile

执行该文件通过组件列表（components.json）生成组件样式入口文件 packages/theme-chalk/src/index.scss，并将所有组件的样式都导入。

gulp build --gulpfile packages/theme-chalk/gulpfile.js

把所有组件的 scss 文件（packages/theme-chalk/src/*.scss）通过 gulp 编译成 css，并放置到 packages/theme-chalk/lib 目录下。

打包和压缩的工作平时一般交给 webpack 来做，但是基于工作流用 gulp 更加快捷和方便。

为什么需要编译呢？

因为 element 在使用时有两种引入方式：

全局引用：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 
Vue.use(ElementUI);
 
new Vue({
  el: '#app',
  render: h => h(App)
});

引入了 lib\theme-chalk\index.css 文件

局部引入：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
 
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
 
new Vue({
  el: '#app',
  render: h => h(App)
});

不需要引入 css 文件，只需引入对应的 scss 文件。这就是为什么需要编译 scss 的原因。

cp-cli packages/theme-chalk/lib lib/theme-chalk

cp-cli 是一个跨平台的 copy 工具，将gulp build --gulpfile .\packages\theme-chalk\gulpfile.js编译生成的 css 目录（packages/theme-chalk/lib）复制到 lib/theme-chalk 下，方便全局引入 css：

import 'element-ui/lib/theme-chalk/index.css';

4、build:utils

"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js"

将 src 目录下的内容忽略 index.js 通过 babel 转译后移动到 lib 下。

5、build:umd

"build:umd": "node build/bin/build-locale.js"

执行后生成 umd 模块的语言包。

将 src/locale/lang 下的语言包都编译到 lib/umd/locale 下。

6、clean

"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage"

清除打包后的文件。

7、deploy:build （生成官网发布文件）

"deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME"

npm run build:file 前文分析过了，主要构建官网文件。接下来分析新的构建脚本。

生产环境下构建官网：

cross-env NODE_ENV=production webpack --config build/webpack.demo.js

8、deploy:extension

"deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js"

在生产环境下构建主题插件，主题编辑器的 chorme 插件项目的 webpack 配置，项目在 extension 目录下。执行命令后会在 extension 目录下生成 dist 目录，其中包含了 chorme 插件，在浏览器加载已解压的扩展程序就可以使用主题生成插件。

9、dev:extension

"dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js"

启动主题插件的开发环境，可以进行开发调试。

10、dev

"dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js"

首先用 npm run bootstrap 安装依赖。npm run build:file 在前面也有提到，主要用来自动化生成一些文件。主要是 node build/bin/build-entry.js，用于生成 Element 的入口 js：先是读取根目录的 components.json，这个 json 文件维护着 Element 所有的组件路径映射关系，键为组件名，值为组件源码的入口文件；然后遍历键值，将所有组件进行 import，对外暴露 install 方法，把所有 import 的组件通过 Vue.component(name, component) 方式注册为全局组件，并且把一些弹窗类的组件挂载到 Vue 的原型链上。

在生成了入口文件的 src/index.js 之后就会运行 webpack-dev-server。

启动组件库本地开发环境。在更改后可以热更新官网。

11、dev:play

"dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js"

组件测试项目，在 examples/play/index.vue 中可以引入组件库任意组件，也可以直接使用 dev 启动的项目，在文档中使用组件。

用于查看某个组件的效果。适用于组件按需加载的显示效果。在 webpack.demo.js 通过环境变量配置输入。

build/webpack.demo.js

const isPlay = !!process.env.PLAY_ENV;
// ……省略webpack具体配置
 
 entry: isProd ? {
    docs: './examples/entry.js'
  } : (isPlay ? './examples/play.js' : './examples/entry.js'),

examples/play.js

import Vue from 'vue';
import Element from 'main/index.js';
import App from './play/index.vue';
import 'packages/theme-chalk/src/index.scss';
 
Vue.use(Element);
 
new Vue({ // eslint-disable-line
  render: h => h(App)
}).$mount('#app');

12、dist

"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme"

打包组件库。

npm run clean && npm run build:file && npm run lint 都已经解释过了，分别是清除上一次打包产物、生成入口文件以及 i18n 文件和 eslint 检测。

webpack --config build/webpack.conf.js

生成 umd 格式的 js 文件（index.js）

const path = require('path');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const TerserPlugin = require('terser-webpack-plugin');
 
const config = require('./config');
console.log(config)
module.exports = {
  // 模式
  mode: 'production',
  // 入口
  entry: {
    app: ['./src/index.js']
  },
  // 输出
  output: {
    path: path.resolve(process.cwd(), './lib'),
    publicPath: '/dist/',
    // 输出的文件名
    filename: 'index.js',
    // 初始的chunk文件名称
    chunkFilename: '[id].js',
    //  library 暴露为 AMD 模块。 在 AMD 或 CommonJS 的 require 之后可访问（libraryTarget:'umd'）
    libraryTarget: 'umd',
    // 入口的默认导出将分配给 library target：
    // if your entry has a default export of `MyDefaultModule`
    // var MyDefaultModule = _entry_return_.default;
    libraryExport: 'default',
    // 输出一个库，为你的入口做导出。
    library: 'ELEMENT',
    // 会把 AMD 模块命名为 UMD 构建
    umdNamedDefine: true,
    // 为了使 UMD 构建在浏览器和 Node.js 上均可用，应将 output.globalObject 选项设置为 'this'。对于类似 web 的目标，默认为 self。
    globalObject: 'typeof self !== \'undefined\' ? self : this'
  },
  // 解析
  resolve: {
    // 能够使用户在引入模块时不带扩展.尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
    extensions: ['.js', '.vue', '.json'],
    // 创建 import 或 require 的别名，来确保模块引入变得更简单。
    alias: config.alias
  },
  // 外部扩展
  externals: {
    vue: config.vue
  },
  // 优化
  optimization: {
    // 允许你通过提供一个或多个定制过的 TerserPlugin 实例， 覆盖默认压缩工具(minimizer)
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          output: {
            comments: false
          }
        }
      })
    ]
  },
  // 性能
  performance: {
    // 不展示警告或错误提示。
    // 官网推荐使用error,有助于防止把体积大的bundle部署到生产环境,从而影响网页的性能
    // 很奇怪这里要把它关闭
    hints: false
  },
  // stats对象
  stats: {
    // 告知 stats 是否添加关于子模块的信息。
    children: false
  },
  // 模块
  module: {
    // 使用babel-loader和vue-loader
    rules: [
      {
        test: /\.(jsx?|babel|es6)$/,
        include: process.cwd(),
        exclude: config.jsexclude,
        loader: 'babel-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          }
        }
      }
    ]
  },
  // 插件
  plugins: [
    new ProgressBarPlugin(),
    new VueLoaderPlugin()
  ]
};

webpack --config build/webpack.common.js

生成 commonjs 格式的 js 文件（element-ui.common.js），require 时默认加载的是这个文件。

    libraryTarget: 'commonjs2'

与 webpack.conf.js 不同在于输出 output 的 libraryExport。

前者暴露的是 commonjs2，后者暴露的是 umd。

webpack --config build/webpack.component.js

与前两者的 index.js 入口不同，以 components.json 为入口，将每一个组件打包生成一个文件，用于按需加载。

npm run build:utils && npm run build:umd && npm run build:theme 也已经讲过，分别是转译工具方法、转译语言包、生成样式文件。

13、lint

"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet"

eslint 校验 src、packages 和 build 目录下的文件。

14、pub

"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh"

npm run bootstrap 下载依赖。

sh build/git-release.sh：主要是检测 dev 分支是否冲突。

#!/usr/bin/env sh
# 切换到dev分支
git checkout dev
# 检测本地是否有未提交文件
if test -n "$(git status --porcelain)"; then
# 输出日志
  echo 'Unclean working tree. Commit or stash changes first.' >&2;
  exit 128;
fi
# 检测本地分支是否有误
if ! git fetch --quiet 2>/dev/null; then
  # 输出日志
  echo 'There was a problem fetching your branch. Run `git fetch` to see more...' >&2;
  exit 128;
fi
# 检测是否有最新提交
if test "0" != "$(git rev-list --count --left-only @'{u}'...HEAD)"; then
  # 输出日志
  echo 'Remote history differ. Please pull changes.' >&2;
  exit 128;
fi
# 输出日志
echo 'No conflicts.' >&2;

sh build/release.sh 脚本完成了以下工作：

合并 dev 分支到 master
修改样式包和组件库的版本号
发布样式包和组件库
提交 master 和 dev 分支到远程仓库

该脚本在发布组件库时可以使用，特别是其中自动更改版本号的功能（每次 publish 时都忘改版本号）。这里提交代码到远程仓库的日志很简单。

#!/usr/bin/env sh
set -e
# 切换到master
git checkout master
# 合并dev分支
git merge dev
# npx: 使用本地已安装的可执行工具，而不需要配置 scripts
VERSION=`npx select-version-cli`
# 更新版本号
read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
echo    # (optional) move to a new line
if [[ $REPLY =~ ^[Yy]$ ]]
then
  # 输出:压缩版本
  echo "Releasing $VERSION ..."
 
  # build
  # 编译打包
  VERSION=$VERSION npm run dist
 
  # ssr test
  node test/ssr/require.test.js            
 
  # 发布到npm
  # publish theme
  # 输出:压缩theme-chalk版本
  echo "Releasing theme-chalk $VERSION ..."
  cd packages/theme-chalk
  # 更改主题包的版本信息
  npm version $VERSION --message "[release] $VERSION"
  # 如果是beta版本则打个beta标签
  if [[ $VERSION =~ "beta" ]]
  then
    npm publish --tag beta
  else
    npm publish
  fi
  cd ../..
 
  # commit
  git add -A
  git commit -m "[build] $VERSION"
  # 更改组件库的版本信息
  npm version $VERSION --message "[release] $VERSION"
  # publish
  # 发布到远程仓库
  git push eleme master
  git push eleme refs/tags/v$VERSION
  git checkout dev
  git rebase master
  git push eleme dev
  # 发布组件库
  if [[ $VERSION =~ "beta" ]]
  then
    npm publish --tag beta
  else
    npm publish
  fi
fi

node build/bin/gen-indices.js 生成目录，支持搜索：

'use strict';
// 生成目录
const fs = require('fs');
const path = require('path');
// 是一个托管的全文、数字和分面搜索引擎，能够从第一次击键交付实时结果。
const algoliasearch = require('algoliasearch');
// 将Unicode str转换为段字符串，确保在URL或文件名中使用它是安全的。
// https://www.npmjs.com/package/transliteration?activeTab=readme
// demo:
// slugify('你好，世界');
// // ni-hao-shi-jie
const slugify = require('transliteration').slugify;
// 密钥
const key = require('./algolia-key');
 
const client = algoliasearch('4C63BTGP6S', key);
const langs = {
  'zh-CN': 'element-zh',
  'en-US': 'element-en',
  'es': 'element-es',
  'fr-FR': 'element-fr'
};
// 四种语言
['zh-CN', 'en-US', 'es', 'fr-FR'].forEach(lang => {
  const indexName = langs[lang];
  const index = client.initIndex(indexName);
  index.clearIndex(err => {
    if (err) return;
    // 读取/examples/docs/中的文件
    fs.readdir(path.resolve(__dirname, `../../examples/docs/${ lang }`), (err, files) => {
      if (err) return;
      let indices = [];
      files.forEach(file => {
        console.log(file)
        const component = file.replace('.md', '');
        const content = fs.readFileSync(path.resolve(__dirname, `../../examples/docs/${ lang }/${ file }`), 'utf8');
        const matches = content
          .replace(/:::[\s\S]*?:::/g, '')
          .replace(/```[\s\S]*?```/g, '')
          .match(/#{2,4}[^#]*/g)
          .map(match => match.replace(/\n+/g, '\n').split('\n').filter(part => !!part))
          .map(match => {


### 最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

*   技术要深入到什么程度？

*   做久了技术总要转型管理？

*   我能做什么，我想做什么？

*   **一技之长，就是深耕你的专业技能，你的专业技术。**（重点）

*   独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

*   拥有事业，选择一份使命，带领团队实现它。（创业）

**一技之长分五个层次**

*   栈内技术 - 是指你的前端专业领域技术

*   栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

*   工程经验 - 是建设专业技术体系的“解决方案”

*   带人做事 - 是对团队协作能力的要求

*   业界发声 - 工作经验总结对外分享，与他人交流



> 永远不要放弃一技之长，它值得你长期`信仰持有`。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> 主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

![](https://img-blog.csdnimg.cn/img_convert/44bc3d1e2743a7cf1e94e28026aedf8d.png)

2401_84619606

关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Element UI 组件库分析和二次开发_make new &lt；component-name&gt；

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript性能linux。
复制链接

扫一扫