Giter VIP home page Giter VIP logo

minipack's Introduction

minipack

minipack 是一个前端打包工具和文档生成工具,是《人人都可以封装 webpack》文章的实现版本。

特别说明

文档样式参考 antd 文档样式,样例中的 markdown 文件拷贝自 antd 的官方文档。

minipack 打包效果 打包效果

minipack 解析 markdown 生成的文档效果图: 文档效果图

使用方法

全局安装

npm install -g @asathinker/minipack

常用命令

##编译模式
minipack build --mode dev ##编译开发版本
minipack build --mode prod ##编译正式版本
##开发模式
minipack server --mode dev ##开发模式
minipack server --mode prod ##正式代码预览
##文档模式
minipack doc --mode dev ##文档开发
minipack doc --mode prod ##正式文档预览

运行 demo

cd demo
yarn install
minipack server

源码编译 minipack,运行 demo

##安装依赖
yarn install
##编译minipack工具
yarn compile
##进入demo目录
cd demo
##安装demo依赖
yarn install
##打包模式
node ../bin/minipack.js build [--mode dev or prod]
##开发运行模式
node ../bin/minipack.js server [--mode dev or prod]
##文档模式
node ../bin/minipack.js doc [--mode dev or prod]

.minipackrc.js 配置文件说明

module.exports = {
  // 入口文件配置
  entry: 'src/pages/**/*js',
  // 输出设置
  output: { path: 'dist', publicPath: '/' },
  //devServer设置,具体参考https://www.webpackjs.com/configuration/dev-server/
  devServer: { port: 8000 },
  //doc配置
  doc: {
    // doc的入口
    entry: 'src/pages/doc.js',
    // docs所在的目录
    dir: 'src/components',
    // doc-loader的配置
    loaderOptions: { async: true }
  },
  // 额外的babel plugins设置
  extraBabelPlugins: [['import', { libraryName: 'antd', style: true }]],
  // 额外的babel presets设置
  extraBabelPresets: [],
  // webpack plugins设置
  extraPlugins: [],
  // 别名设置
  resolveAlias: {
    '@components': path.resolve(__dirname, 'src/components')
  },
  // less变量替换设置
  lessModifyVars: {},
  // webpack loaders
  extraLoaders: []
};

.minipackrc.mock.js 数据 mock 文件说明

module.exports = {
    "Mehod:Url":Object|Function,
    ...
}

Method: 网络请求方法:get、post、put、delete、patch、head、option……

Url: 网络请求地址

Object: 返回的 json 对象,Object 只适合返回类型是 json 的格式,如果返回类型是其他格式,请使用 Function

Function: 函数类型:(req, res) => void, req 是网络请求的 request,res 是网络请求的 response,具体可以参考express查看详细说明

minipack's People

Contributors

asathinker avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Forkers

wengfeifei

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.