站内搜索

本次搜索找到结果 66 条

很多人觉得typescript配置只需要ts-loader一加,就好了。没啥难度。。

ok,确实是。下面我在实际写工程时,搭建的ts环境,算是一个分享吧。

有些人会说:publish模块包,有什么难的?直接npm publish不就好了么?

其实不然,我们还会有这样的问题:

  • 单元测试是否通过?
  • 我怎么发测试包?
  • 发布之后能否打个tag?

最近这一周在写移动端省市区组件,效果图如下:

alt

很多时候,我们写了一个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

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

我之前在文章中有提过UI库按需加载的实现思路。这次说一个新的,再加上css如何按需加载

这两个星期基本上在做移动端组件的改造。

以下简单和大家做一些分享。

不知不觉已经过了大半年多了,是时候做个总结了。

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

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

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

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

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

之前有分享过关于UI组件按需加载的思路,但个人还没怎么实战过,上周实战了一把。

可能有些人会觉得这不是很容易么,但看结合怎样的背景了,像我司的那个react ui库,结合了:

  • antd2.x的ui
  • element ui的table组件
  • 自研的一套

构建用的是webpack。(我在考虑后期改成rollup似乎更合适一些)