Neanderthals Programming Machines

    bees-cli

    1.0.2 • Public • Published

    bees

    A simple CLI for serve and build web app, support JSON pattern config.

    一个简单的CLI工具,无需复杂的配置,轻松的构建和调试项目。

    声明

    Bees 是 create-react-approadhogvue-cli 的克隆版,根据团队和自己日常开发的需求修改而成的, 提供 init、 server、 build 和 test 四个命令,分别用于生成脚手架、本地调试和构建,并且提供了特别易用的 mock 功能。命令行体验同 vue-cli 和 roadhog 一致,但配置略有不同。让人兴奋的是同时支持 Vue 和 React 的构建与调试。如果你喜欢 TypeScript 编译,默认也是支持的。

    安装

    Prerequisites: Node.js (>=6.5, 7.x preferred) and Git.

    $ npm install -g bees-cli

    使用

    脚手架

    $ bees init

    本地开发

    $ bees server

    打包发布

    $ bees build

    DllPlugin

    $ bees build-dll

    Mock

    bees server 支持 mock 功能,类似 dora-plugin-proxy,在 .beesrc.mock.js 中进行配置,支持基于 require 动态分析的实时刷新,支持 ES6 语法,以及友好的出错提示。

    比如:

    export default {
      // 支持值为 Object 和 Array
      'GET /api/users': { users: [1,2] },
     
      // GET POST 可省略
      '/api/users/1': { id: 1 },
     
      // 支持自定义函数,API 参考 express@4
      'POST /api/users/create': (req, res) => { res.end('OK'); },
     
      // Forward 到另一个服务器
      'GET /assets/*': 'https://assets.online/',
     
      // Forward 到另一个服务器,并指定子路径
      // 请求 /someDir/0.0.50/index.css 会被代理到 https://g.alicdn.com/tb-page/taobao-home, 实际返回 https://g.alicdn.com/tb-page/taobao-home/0.0.50/index.css
      'GET /someDir/(.*)': 'https://g.alicdn.com/tb-page/taobao-home',
    };

    智能重启

    配置文件修改的修改会触发 bees server 的自动重启,会触发重启的文件有:

    • .beesrc
    • .beesrc.js
    • .beesrc.mock.js

    配置

    关于配置的一些基本概念:

    • 配置存于 .beesrc 文件中(如果你不喜欢 JSON 配置,可以用 .beesrc.js 以 JS 的方式编写,支持 ES6)
    • 格式为 JSON,允许注释
    • 布尔类型的配置项默认值均为 false
    • 支持通过 webpack.config.js 以编码的方式进行配置,但不推荐,因为 bees 本身的 major 或 minor 升级可能会引起兼容问题。使用时会给予警告⚠️⚠️⚠️, 。(webpack.config.js 本身的编写支持 ES6,会通过 babal-register 做一层转换。)

    .beesrc 默认配置:

    {
      "use": "react",
      "entry": "src/index.js",
      "publicPath": "/",
      "outputPath": "./dist",
      "extraBabelPresets": [],
      "extraBabelPlugins": [],
      "extraPostCSSPlugins": [],
      "hash": false,
      "disableCSSModules": false,
      "cssSourceMap": false,
      "analyze": false,
      "autoprefixer": null,
      "externals": null,
      "library": null,
      "libraryTarget": "var",
      "multipage": false,
      "dllPlugin": null,
      "define": null,
      "proxy": null,
      "env": null,
    }

    .beesrc 的 React开发配置:

    {
      "use": "react",
      "entry": "src/index.js",
      "publicPath": "/",
      "extraBabelPresets": [
        "react"
      ],
      "extraBabelPlugins": [
        "react-require"
      ],
      "disableCSSModules": false,
      "autoprefixer": null,
      "externals": null,
      "multipage": true,
      "define": null,
      "proxy": null,
      "env": {
        "development": {
          "cssSourceMap": false
        },
        "production": {
          "cssSourceMap": true,
          "analyze": true
        }
      }
    }

    package.json 的 React开发配置:

    {
      "babel-preset-react": ""
    }

    .beesrc 的 Vue开发配置:

    {
      "use": "vue",
      "entry": "src/index.js",
      "publicPath": "/",
      "extraBabelPlugins": [
        "transform-vue-jsx",
        "transform-object-rest-spread"
      ],
      "disableCSSModules": false,
      "autoprefixer": null,
      "externals": null,
      "multipage": true,
      "define": null,
      "proxy": null,
      "env": {
        "development": {
          "cssSourceMap": false
        },
        "production": {
          "cssSourceMap": true,
          "analyze": true
        }
      }
    }

    package.json 的 Vue开发配置:

    {
      "babel-plugin-transform-vue-jsx": ""
    }

    use

    指定当前使用的前端框架是vue 还是 react, 默认支持的是react

    "use": "react"
    

    entry

    指定 webpack 入口文件,支持 glob 格式。

    如果你的项目是多页类型,会希望把 src/pages 的文件作为入口。可以这样配:

    "entry": "src/pages/*.js"
    

    注意: entry 默认已经导入了一些polyfills,包括 object-assignpromisewhatwg-fetch 。这样我们就可以放心的使用 Object.assign()fetch()new Promise() ,不用担心浏览器是否支持的问题了。

    disableCSSModules

    禁用 CSS Modules。最好别关,熟悉并使用他后,你会发现写样式简单了很多。

    publicPath

    配置生产环境的 publicPath,开发环境下永远为 /

    extraBabelPlugins

    配置额外的 babel plugin。babel plugin 只能添加,不允许覆盖和删除。

    "extraBabelPlugins": ["transform-runtime"],
    "env": {
      "development": {
        "extraBabelPlugins": ["dva-hmr"]
      }
    }
    

    这样,开发环境下的 extraBabelPlugins 是 ["transform-runtime", "dva-hmr"],而生产环境下是 ["transform-runtime"]

    extraResolveExtensions

    配置额外的 extensions。

      "extraResolveExtensions": ['.web.js', '.web.jsx', '.web.ts', '.web.tsx']
    

    style

    样式预编译器,默认支持css 和 less. sass[scss] 和 stylus[styl] 由npm-install-webpack-plugin自动安装

    style: ["css", "less","sass","stylus"]
    

    extraPostCSSPlugins

    配置额外的 postcss 插件。

    注意:由于 postcss 的插件是以函数的方式进行配置的,所以这个配置只能在 .beesrc.js 里使用。

    比如:

    import pxtorem from 'postcss-pxtorem'
    extraPostCSSPlugins: [
      pxtorem({
        rootValue: 100,
        propWhiteList: [],
      }),
    ],
    

    hash

    使用 hash 文件名。

    "hash": true
    

    autoprefixer

    配置 autoprefixer 参数,详见 autoprefixerbrowserslist

    比如,如果是做移动端的开发,可以配成:

    "autoprefixer": {
      "browsers": [
        "iOS >= 8", "Android >= 4"
      ]
    }
    

    imgCompress

    生产环境是否开启图片压缩,默认没有开启, 如果设置为true是开启图片压缩模式的。

    "imgCompress": true
    

    proxy

    配置代理,详见 webpack-dev-server#proxy。(注意:仅支持 JSON 格式的配置,不支持 bypass。)

    如果要代理请求到其他服务器,可以这样配:

    "proxy": {
      "/api": {
        "target": "http://jsonplaceholder.typicode.com/",
        "changeOrigin": true,
        "pathRewrite": { "^/api" : "" }
      }
    }
    

    此配置也可以配置到 package.json 中,支持 prepareProxy 方法。

    然后访问 /api/users 就能访问到 http://jsonplaceholder.typicode.com/users 的数据。

    如果要做数据 mock,可以考虑和 json-server 或者 mock-server 结合使用,把 /api 代理到 json-server 或者 mock-server 启动的端口。

    externals

    {
      "externals": {
        "react": "window.React"
      }
    }
    

    配置 webpack 的 externals 属性。

    library

    配置 webpack 的 library 属性。

    libraryTarget

    配置 webpack 的 libraryTarget 属性。

    multipage

    配置是否多页应用。多页应用会自动提取公共部分为 common.js 和 common.css 。

    dllPlugin

    "dllPlugin": {
      "name": "bees",
      "include": [
        "react",
        "react-dom",
        "react-redux",
        "react-router",
        "react-router-redux",
        "redux"
      ]
    }
    

    define

    配置 webpack 的 DefinePlugin 插件,define 的值会自动做 JSON.stringify 处理。

    analyze

    在生产环境下开启 Visualizer

    "env": {
      "production": {
        "analyze": true
      }
    }
    

    service workers

    了解 service workers 相关知识。

    开启 service workers

    "sw": true
    

    env

    针对特定的环境进行配置。server 的环境变量是 development,build 的环境变量是 production

    比如:

    "env": {
      "development": {
        "cssSourceMap": false
      },
      "production": {
        "cssSourceMap": true
      }
    }
    

    这样,在 development 下不开启 CSS 的 SourceMap, 在 production 下开启 CSS 的 SourceMap

    这样,开发环境下 CSS 的 SourceMap 是 "cssSourceMap": false,而生产环境下是 "cssSourceMap": true

    环境变量

    可环境变量临时配置一些参数,包括:

    • PORT, 端口号,默认 12306
    • HOST, 默认 localhost
    • HTTPS,是否开启 https,默认关闭
    • CLEAR_CONSOLE,设为 none 时清屏

    比如,使用 12306 端口开启服务器可以这样:

    // OS X, Linux
    $ PORT=12306 bees server
     
    // Windows (cmd.exe)
    set PORT=12306&&bees server

    命令行参数

    bees init

    Usage:
        bees init <template-name> [project-name]
     
    Options:
     
        -h, --help   output usage information
        -c, --clone  use git clone
     
    Examples:
        # create a new project with an official template 
        $ bees init vue-webpack my-project
      
        # create a new project straight from a github template 
        $ bees init username/repo my-project

    官方模板仓库 fis-templates organization.

    目前可用的模板列表

    bees server

    $ bees server -h
    Usage: bees server [options]
     
    Options:
      --open  Open url in browser after started            [boolean] [default: true]
      -h      Show help                                                    [boolean]

    bees build

    $ bees build -h
    Usage: bees build [options]
     
    Options:
      --debug            Build without compress           [boolean] [default: false]
      --watch, -w        Watch file changes and rebuild   [boolean] [default: false]
      --output-path, -o  Specify output path                [string] [default: null]
                                                          [boolean] [default: false]
      -h                 Show help                                         [boolean]

    bees test

    $ bees test -h
    Usage: bees test [options] [mocha-options]
     
    Options:
      --coverage  Output coverage                         [boolean] [default: false]
      -h          Show help                                                [boolean]

    使用 public 目录

    我们约定 public 目录下的文件会在 server 和 build 时被自动 copy 到输出目录(默认是 ./dist)下。所以可以在这里存放 favicon, iconfont, html, html 里引用的图片等。

    常见问题

    那么为什么提供 JSON 级别的约定型配置,而非类似 webpack.config.js 的编码型配置?

    首先是 JSON 的方式比较简单,true/false 或是一些简单的字符串就可完成配置;另外,JSON 方式能有效控制使用场景,而编程式的非常不可控,bees 的一个简单改动都可能导致之前的配置不可用。

    resolve.alias

    创建 import 或 require 的别名,来确保模块引入变得更简单, 别名是 ~, 指向 src/ 文件夹下的常用模块。

    import NavBar from '~/components/nav-bar'
    

    node-sass 安装失败

    SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass --save-dev

    image-webpack-loader 编译问题

    libpng issues

    Installing on some versions of OSX may raise errors with a missing libpng dependency:

    Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
    

    This can be remedied by installing the newest version of libpng with homebrew:

    brew install libpng

    Install

    npm i bees-cli

    DownloadsWeekly Downloads

    164

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • moocss