- 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)
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.