衣食父母(2020/1/7)

chrome插件octotree,生成github项目目录😍😍😍

实现roadhog库(基于webpack的打包库,可以build,dev-server,jest)😍😍😍

项目地址

全局命令zkroadhog

cd zk-roadhog
npm link

zkroadhog.js

#!/usr/bin/env node
const spawn = require('cross-spawn');
const chalk = require('chalk');
const script = process.argv[2];
switch (script) {
    case "-v":
        console.log(require('../package.json').version);
        break;
    case "build":
    case "server":
        let result = spawn.sync(
            "node", [require.resolve(`../lib/${script}.js`)], { stdio: 'inherit' }
        );
        process.exit(result.status);
        break
    default:
        console.log('don');
        break
}

zkroadhog build

const webpack = require('webpack');
const chalk = require('chalk');
function done(err, stats) {
    console.log(stats.toJson().assets);

}
function build() {
    let config = require('./webpack.config');
    let compiler = webpack(config);
    compiler.run(done);

}
build();

zkroadhog server

let webpackDevServer = require('webpack-dev-server')
const webpack = require('webpack');
function runServer() {
    let config = require('./webpack.config');
    let compiler = webpack(config);
    compiler.run((err, stats)=> {
        const devServer =new  webpackDevServer(compiler, {
            contentBase: 'dist'
        });
        devServer.listen(8080, '0.0.0.0', function () {
            console.log('start');
        })
    })
    
}
runServer();

umi基础(上)😍😍😍

脚本

"scripts": {
    "dev": "umi dev",
    "build": "umi build",
    "test": "umi test"
  },

静态路由,page目录即路由

动态路由

<Link to={{ pathname: `/user/detail/1`, state: { id: 1, name: '张三' } }}>张三</Link>
<Link to={{ pathname: `/user/detail/2`, state: { id: 2, name: '李四' } }}>李四</Link>

权限路由

/**
 * title: 个人中心
 * Routes:
 *   - ./PrivateRoute.js
 */
import styles from './profile.css';
import router from 'umi/router';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page profile</h1>
      <button onClick={()=> {router.goBack()}} >返回</button>
    </div>
  );
}

import { route, Redirect } from 'react-router-dom';
export default (props) => {
    console.log(props);
    return (
        // <Route />
        null
    )
}

项目地址