maby-lib-cli
简介
用于快速搭建 library 的基础环境,使用 babel 进行编译, webpack 进行打包。
安装
npm i maby-lib-cli --save-devyarn add maby-lib-cli -D
使用
初始化项目
在安装项目时会默认执行一次初始化项目命令
>=v1.0.0
版本只初始化 package.json
下的执行命令, 安装完成后需手动执行 npm run init
初始化项目
maby-lib init
开发模式
maby-lib start
发布
maby-lib build
预览
maby-lib preview
在
package.json
中配置好各个启动命令即可
更多配置
支持多种方式定义配置文件
- 在
package.json
中可以自定义配置项目
- 在
mabycli.js
文件下自定义mabycli
中的配置项
需在
package.json
中指明访问路径
- 在
mabycli.js
文件下自定义mabycli
中的配置项
需在
package.json
中指明访问路径
const path = ; // 使用一个函数时,将给函数传递内置的 plugins、loaders、resolve, 返回类型和 webpack 对应配置一样 const getPlugins = { return plugins; } // 一个方法或者一个对象 module stylelint: true // 是否开启 stylelint openBrowser: true // 是否启动时打开浏览器 eslint: true // 是否开启 eslint vendors: // 需要提取的公共库 "react" "react-dom" devServerOptions: // webpack-dev-server 的配置项 contentBase: path overlay: true headers: 'access-control-allow-origin': '*' open: true port: 3300 stats: modules: false colors: true // v 2.0.0 新增功能 plugins: || getPlugins // webpack的 plugins 配置 loaders: ...some loaders || getLoaders // webpack的 loaders 配置 resolve: '.js' '.jsx' '.json' || getResolve // webpack的 resolve 配置 ;
- 在
.mabycli
文件下自定义mabycli
中的配置项
- 配置
antd
主题样式
package.json
.babelrc
mabycli.js
const path = ;const fs = ;const ExtractTextPlugin = ; const getTheme = let theme = ; // 获取主题颜色 const pkgPath = path; const pkg = fs ? : ; if pkgtheme && typeof pkgtheme === 'string' let cfgPath = pkgtheme; // relative path if cfgPath === '.' cfgPath = path; const getThemeConfig = ; theme = ; else if pkgtheme && typeof pkgtheme === 'object' theme = pkgtheme; return theme;; const getLoaders = loaders const theme = ; if !theme return loaders; // 利用 modifyVars 修改主题样式 const themeLoaders = test: /\.less$/ include: /node_modules/ use: ExtractTextPlugin ; // 修改内部loader 的 exclude loaders; loaders; return loaders;; // 修改 ExtractText, 修改antd主题样式时,需要设置 allChunks: trueconst getExtractTextPlugin = ExtractText return filename: ExtractTextfilename allChunks: true ;;module stylelint: true port: 10056 loaders: getLoaders extractTextPlugin: getExtractTextPlugin;
版本变化信息查看
目录结构
├─ dist 压缩文件 library.[version].min.js/library.[version].min.css ├─ example 预览环境 | ├─ example.js library 测试区 | ├─ index.js 开发模式入口 ├─ lib 生产环境库 ├─ src 开发环境 | ├─ components | | ├─ style | | ├─ index.js | ├─ style | ├─ index.js ├─ .babelrc ├─ .eslintignore ├─ .gitignore ├─ .eslintrc eslint配置文件夹 ├─ postcss.config.js postcss配置文件夹 ├─ README.md