分类前端下的文章

admin 发布于 09月09, 2019

移动端1px的scss版本

基于antd-mobile的less代码改造而成:

$border-color-base: #ddd;

@mixin scale-hairline-common($color, $top, $right, $bottom, $left){
  content: '';
  position: absolute;
  background-color: $color;
  display: block;
  z-index: 1;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin hairline($direction, $color: $border-color-base, $radius: 0) {
  @if ($direction == 'top') {
    border-top: 1PX solid $color;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-top: none;

        &::before {
          @include scale-hairline-common($color, 0, auto, auto, 0);
          width: 100%;
          height: 1PX;
          transform-origin: 50% 50%;
          transform: scaleY(0.5);

          @media (min-resolution: 3dppx) {
            transform: scaleY(0.33);
          }
        }
      }
    }
  }
  @if ($direction == 'right') {
    border-right: 1PX solid $color;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-right: none;

        &::after {
          @include scale-hairline-common($color, 0, 0, auto, auto);
          width: 1PX;
          height: 100%;
          background: $color;
          transform-origin: 100% 50%;
          transform: scaleX(0.5);

          @media (min-resolution: 3dppx) {
            transform: scaleX(0.33);
          }
        }
      }
    }
  }
  @if ($direction == 'bottom') {
    border-bottom: 1PX solid $color;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-bottom: none;

        &::after {
          @include scale-hairline-common($color, auto, auto, 0, 0);
          width: 100%;
          height: 1PX;
          transform-origin: 50% 100%;
          transform: scaleY(0.5);

          @media (min-resolution: 3dppx) {
            transform: scaleY(0.33);
          }
        }
      }
    }
  }
  @if ($direction == 'left') {
    border-left: 1PX solid $color;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-left: none;

        &::before {
          @include scale-hairline-common($color, 0, auto, auto, 0);
          width: 1PX;
          height: 100%;
          transform-origin: 100% 50%;
          transform: scaleX(0.5);

          @media (min-resolution: 3dppx) {
            transform: scaleX(0.33);
          }
        }
      }
    }
  }
  @if ($direction == 'all') {
    border: 1PX solid $color;
    border-radius: $radius;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border: none;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 200%;
          height: 200%;
          border: 1PX solid $color;
          border-radius: $radius * 2;
          transform-origin: 0 0;
          transform: scale(0.5);
          box-sizing: border-box;
          pointer-events: none;

          // @media (min-resolution: 3dppx) {
          //   width: 300%;
          //   height: 300%;
          //   border-radius: $radius * 3;
          //   transform: scale(0.33);
          // }
        }
      }
    }
  }
}

阅读全文 »

admin 发布于 09月01, 2019

react在线编辑代码

很多时候,我们写了一个UI库,但是别人在用的过程中会出现问题。那么这个问题,可能是我们的,也可以是他们的,所以往往需要一个类似codesandbox的网站。

那个网站似乎没法用内网的npm包,所以这点比较蛋疼。

好在像react-live能够简单地支持上面的功能,即在线编辑代码。

那么来演示一下吧。

import React from 'react';
import ReactDOM from 'react-dom';

import * as dpl from 'dpl-react';

import "dpl-react/dist/dpl.css";

import {
  LiveProvider,
  LiveEditor,
  LiveError,
  LivePreview
} from 'react-live';

const scope = { dpl };

const importRegex = /import(?:["'\s]*([\w*{}\n, ]+)from\s*)["'\s]*([@\w/_-]+)["'\s]*;?/gm;

const imports = {
    "dpl-react": "dpl",
    "moment": "moment"
}

const transformCode = (code) => {
  return code.replace(importRegex, (match, p1, p2) => {
    const matchingImport = imports[p2];
    if (!matchingImport) {
      return match;
    }
    return 'const ' + p1 + ' = ' + matchingImport + ';';
  });
}

const code = `
  import { Button } from 'dpl-react';

  render(<Button>123</Button>)
`;

const App = () => {
  return (
    <LiveProvider transformCode={transformCode} code={code} scope={scope} noInline={true}>
      <LiveEditor />
      <LiveError />
      <LivePreview />
    </LiveProvider>
  )
};

ReactDOM.render(<App />, document.getElementById("root"));

效果如下:

alt

接下去无非是样式的美化而已。

阅读全文 »

admin 发布于 08月22, 2019

npm如何发布测试版本

我相信大家很少关注npm publish的参数,它有一个--tag,是干嘛的呢?

我先卖个关子。

我们都知道在公司里面,发库或者构建工具的版本,正式版肯定要求是没有bug的。

但似乎很难做到,因为有些时候可能没有写测试用例,或者写了测试用例也没用,甚至时候会出现:这一块不是相当简单么,给我3s,我提交一下,结果上去之后直接报错等情况。

因此我们需要一个测试版本,来让自己或者小白鼠们尝试,简单地说,有点类似:灰度发布

所以就有了alphabetarc等各种版本。如果我们要发布1.0.0,那么在此之前要有1.0.0-alpha.0,等各种版本。

公网npmpublish默认规则是这样的:只要package.json里面的版本带有alpha这种的,则用户默认安装不到,要指定版本或者@next才行。

但是私有npm库:verdaccio是不行的,于是就有了我的这个issue

另外一个群的哥们给了我一些帮助,可以通过--tag来起到这样的效果。

譬如package.jsonversion1.0.0-alpha.0版本,在发布时:

npm publish --tag alpha

那么在默认下用户是安装不到这个版本的,只有指定版本或者如下:

yarn add moduleName@alpha

才可以装到最新的。

阅读全文 »

admin 发布于 08月18, 2019

babel踩坑记

上周同事碰到一个问题,就是IE11下报错。排查了一下,发现是query-string这个包,它的代码生成出来的结果是es6的,并没有转成es5

后来发现有一些包也有类似的情况,低点的版本是转了es5的,但最新的版本似乎都放弃了。

网上翻了一下,有一个issueUse Babel to compile to ES5

alt

阅读全文 »

admin 发布于 07月09, 2019

从零开始造移动端组件

显然,从头开始造移动端轮子,特别是React的,是不科学的,也是不实际的。

那么就只能抄了,然后在抄过来的代码里面做修改,虽然有些不厚道,但对于公司来说,我觉得是最快的方式。

阅读全文 »

admin 发布于 07月07, 2019

webpack publicPath 踩坑记

公司层面统一了技术栈,开始全面地使用React。所以我之前写的一个比较简陋的cui-react-scripts,要开始大规模地要在各个业务里面坑踩。

这周他们有一个需求是能自定义publicPath

这里会有一些边界上的处理,比如说开发人员传了xx,你得将publicPath处理成/xx/

阅读全文 »