前端碰到的工程化知识

226 阅读4分钟

Linux命令

工作中用到不易记住的:

  • ifconfig 看ip地址

  • ls -l 以列表展示

  • ls -al 以列表展示并能看到隐藏文件

  • chown hannie nginx/ 把 nginx/ 的所有者设置 hannie
    利用 chown 将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID;组可以是组名或者组ID;文件是以空格分开的要改变权限的文件列表,支持通配符

  • ps -ef | grep nginx grep命令是一种强大的文本搜索工具,它能[使用正则表达式]搜索文本,并把匹 配的行打印出来。

命令拆解:
ps:将某个进程显示出来
-A  显示所有程序。
-e  此参数的效果和指定"A"参数相同。
-f  显示UID,PPIP,C与STIME栏位。

  • sudo vi /etc/hosts 打开本地host

更多查看 Linux 命令大全

怎么为文件添加软链接

软链接是文件可以指向位于其他分区、甚至是其他网络硬盘上的某个文

用法:ln -s 源文件路径 软链接文件路径

igc是按照到本地的全局自动化运行工具命令

为什么会使用ln命令呢?

因为在工作中开发私有组件库时,运行npm link失效,后来发现是igc指向路劲和npm link一样,所以改变软链路劲

找出igc在电脑中的路劲:where igc

ln -s igc1 改后的文件路径

发现执行igc1没有权限,添加权限

控制用户对文件的权限:chmod 777 igc1

顺便运行下其他命令:

查询:ls ll igc*

开发脚手架常用工具库

  • npm view 包名 versions --registry=npm.my.com
    检查npm包版本(线上的)

  • npm ls 包名 查看安装的模块,并且会输出本地最新的版本号

  • git symbolic-ref --short -q HEAD
    检查本地分支

  • rm -rf dist/ 删除dist

  • minimist const argv = require('minimist')(process.argv.slice(2));

  • child_process 执行shell命令

  • ora 用于控制台,输出提示

const spinner = ora();
spinner.start()
spinner.stop()
spinner.succeed()
  • commander:用于处理控制台命令

  • inquirer:用于控制台命令

  • semver:用于版本检测提示

  • fs、fs-extra:用于fs操作询问

  • execa:用于执行终端命令

  • colors、chalk :用于五彩斑斓的控制台

组件私有库,可以按需引入

下面以Element UI分析其配置,我公司也是这么弄的

全局组件的两种实现方式

1. Vue.extend

以组件Message为例的关键步骤:

  1. 引入组件vue文件
  2. Vue.extend(Main)
  3. 实例化instance = new MessageConstructor({})
  4. 挂载实例instance.$mount()
  5. 加入body:document.body.appendChild(instance.$el)
  6. export default Message;
import Vue from 'vue';
//1
import Main from './main.vue';
//2
let MessageConstructor = Vue.extend(Main);

const Message = function(options) {
  if (Vue.prototype.$isServer) return;
  options = options || {};
  if (typeof options === 'string') {
    options = {
      message: options
    };
  }
  let userOnClose = options.onClose;
  let id = 'message_' + seed++;

  options.onClose = function() {
    Message.close(id, userOnClose);
  };
  //3
  instance = new MessageConstructor({
    data: options
  });
  instance.id = id;
  if (isVNode(instance.message)) {
    instance.$slots.default = [instance.message];
    instance.message = null;
  }
  //4
  instance.$mount();
  //5
  document.body.appendChild(instance.$el);
  ...
  return instance;
};

['success', 'warning', 'info', 'error'].forEach(type => {
  Message[type] = options => {
   ...
    return Message(options);
  };
});

Message.close = function(id, userOnClose) {};
Message.closeAll = function() {};
//6
export default Message;

2. install

以Button为例的关键步骤:

  1. 引入组件vue文件
  2. ElButton.install
  3. Vue.component(ElButton.name, ElButton);
  4. 导出export default ElButton;
import ElButton from './src/button';
/* istanbul ignore next */
ElButton.install = function(Vue) {
  Vue.component(ElButton.name, ElButton);
};
export default ElButton;

引入组件使用方法

Vue.use(Message);
Vue.use(ElButton);

webpack.config.js配置

components.json 文件中定义入口文件,分别定义出来,为了拆包

const Components = require('../components.json');
const webpackConfig = {
  mode: 'production',
  entry: Components,
  output: {
    path: path.resolve(process.cwd(), './lib'),
    publicPath: '/dist/',
    filename: '[name].js',
    chunkFilename: '[id].js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: ['node_modules']
  },
  externals: config.externals,
};
module.exports = webpackConfig;

package重点配置的几个参数

version:版本

"version": "2.13.2",

main:入口文件

"main": "lib/element-ui.common.js"

repository:git仓库所在位置

"repository": {
  "type": "git",
  "url": "git@github.com:ElemeFE/element.git"
}

typings:TypeScript 的入口文件

"typings": "types/index.d.ts",

files: 发布package时,控制哪些文件会发布上去

"files": [
  "lib",
  "src",
  "packages",
  "types"
],

bugs:bug地址

"bugs": {
  "url": "https://github.com/ElemeFE/element/issues"
},

私有库版本含义

私有库版本含义

服务搭建

知道公司用pm2 + verdaccio

怎么配置继续研究,下文给出方案

jenkins特殊处理

  1. 改变样式 工作是使用jenkins进行编译打包,左边状态栏包含有【删除项目】【编译按钮】,如果点击【编译按钮】的时候不小心点到【删除项目】,这个该怎么解决?

可以在jenkins中按照以下步骤找到改变样式的地方:

Manage Jenkins】——》【System Configuration】——》【configurate system】——》Theme

根据需要改变样式,以便于减少这样问题出现,比如把【删除项目】放在离【编译按钮】最远的地方

  1. jenkins中的命令可以在本地写shell脚本实现,比如【编译按钮】

因为jenkins没有自己的数据库,所以记录都保存在本地,所以可以写shell脚本或者node操作它们

以上图片中配置Authentication Token,可以在本地执行我们配置好的参数

大家看到此处,可以自己实操下,因为涉及到信息,就不在此处贴代码了。

github.com/ElemeFE/ele…