- Notifications
You must be signed in to change notification settings - Fork2
jsany/lean
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
dumi babel exapple （base father2）
babel 方式是文件到文件的编译，不会做额外的处理
- 不要在组件中使用 cssModules，否则，构建产物也会保持 cssModules 的引用方式（形如：
import Styles from 'style/index.css） - 需要生成 d.ts 文件，需要引入静态资源，看
PR，临时方案 - 如果需要 umd 产物，不要像 antd 那样 css 和 js 分离开发，因为 umd 使用的是 rollup 打包，分离开发下 css 没有依赖关系，不会被打包
- base antd
- babel
- build esm、cjs、umd
- support import assets: css、image、...
- supprot d.ts
- support unitTest(@testing-library/react)
为了支持 babel 方式下，引入静态资源，并生成 d.ts 声明文件，提了PR，但 father2 目前官方没时间处理，我这里进行了 hack 处理。
临时方案：umijs/father#227，以下不用看了
增加 npm 命令"hack": "node scripts/hack-depend.js"，对 node_modules 下的依赖进行 hack 处理：
- 在
typings.d.ts文件中声明非js/ts模块：
declare module'*.css';declare module'*.less';declare module'*.png';declare module'*.jpg';declare module'*.gif';
package.json添加脚本命令：
"scripts" : {"postinstall":"node scripts/hack-depend.js"}
- 写
scripts/hack-depend.js脚本：
/** * 重写依赖模块（读取文件查找替换） */constfs=require('fs');constpath=require('path');constsep=path.posix.sep;consthacks=[{// https://github.com/umijs/father/pull/220 ,官方没时间处理 PR，这里进行 hack 处理name:'father-build',path:'../node_modules/father-build/lib/babel.js',hack:data=>{// console.log(data)returndata.replace(` function getTsconfigCompilerOptions(path) { const config = parseTsconfig(path); return config ? config.compilerOptions : undefined; } function getTSConfig() { const tsconfigPath = (0, _path.join)(cwd, 'tsconfig.json'); const templateTsconfigPath = (0, _path.join)(__dirname, '../template/tsconfig.json'); if ((0, _fs.existsSync)(tsconfigPath)) { return getTsconfigCompilerOptions(tsconfigPath) || {}; } if (rootPath && (0, _fs.existsSync)((0, _path.join)(rootPath, 'tsconfig.json'))) { return getTsconfigCompilerOptions((0, _path.join)(rootPath, 'tsconfig.json')) || {}; } return getTsconfigCompilerOptions(templateTsconfigPath) || {}; }`,` function getTsconfigCompilerOptions(path) { const config = parseTsconfig(path); return config ? config.compilerOptions : undefined; } function getTsconfigInclude(path) { const config = parseTsconfig(path); const includesPath = config ? config.include || [] : []; return includesPath; } function getTSConfig() { const tsconfigPath = (0, _path.join)(cwd, 'tsconfig.json'); const templateTsconfigPath = (0, _path.join)(__dirname, '../template/tsconfig.json'); if ((0, _fs.existsSync)(tsconfigPath)) { return getTsconfigCompilerOptions(tsconfigPath) || {}; } if (rootPath && (0, _fs.existsSync)((0, _path.join)(rootPath, 'tsconfig.json'))) { return getTsconfigCompilerOptions((0, _path.join)(rootPath, 'tsconfig.json')) || {}; } return getTsconfigCompilerOptions(templateTsconfigPath) || {}; } function getTSMatch() { const tsconfigPath = join(cwd, 'tsconfig.json'); const templateTsconfigPath = join(__dirname, '../template/tsconfig.json'); if (existsSync(tsconfigPath)) { return getTsconfigInclude(tsconfigPath) || []; } if (rootPath && existsSync(join(rootPath, 'tsconfig.json'))) { return getTsconfigInclude(join(rootPath, 'tsconfig.json')) || []; } return getTsconfigInclude(templateTsconfigPath) || []; }`,).replace(`&& !path.endsWith('.d.ts');`,`&& (path.endsWith('typings.d.ts') || path.endsWith('index.d.ts') || !path.endsWith('.d.ts'));`,).replace(`[(0, _path.join)(srcPath, '**/*'),`,`[(0, _path.join)(srcPath, '../typings.d.ts'),(0, _path.join)(srcPath, '../index.d.ts'),(0, _path.join)(srcPath, '../typings/index.d.ts'),(0, _path.join)(srcPath, '**/*'),`,);},},];construn=()=>{for(constitemofhacks){constfinalPath=path.resolve(__dirname,item.path.replace(/\//g,sep));fs.readFile(finalPath,'utf8',(err,data)=>{if(err){throwerr;}// console.log('=====data=====')// console.log(data.indexOf(`&& !path.endsWith('.d.ts');`))// console.log(typeof data)// console.log(String(data))// console.log('=====data=====')constfixed=item.hack(data);fixed&&fs.writeFile(finalPath,fixed,err=>{if(err){throwerr;}console.log('hack success');});});}};run();
importReactfrom'react';import{Foo,Button}from'lean';exportdefault()=>{return(<div><Footitle="demo"/><ButtonbtnType="primary">primary</Button></div>);};
Install dependencies,
$ npm i
Hack dependencies,
$ npm run hack
Start the dev server,
$ npm start
Build documentation,
$ npm run docs:build
Build library viafather-build,
$ npm run build
Test Components,
# test all components$ npm runtest
# test all components with coverage$ npm run test:coverage# test one component Foo$ npx umi-test src/Foo/index.test.tsxAbout
🍚 dumi babel example (support assets、unitTest)