Noncollinear Perpendicular Microcrystalline
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

hey-cli

1.5.0 • Public • Published

hey-cli

Webpack scaffolding, hot-dev-server, build.
Do not need to understand webpack, only need to know how to configure it to use, get rid of cumbersome duplication of webpack configuration.

中文文档

此处有中文文档

Advantage

  • Global installation, all development projects are supported, do not need to install and configure each project webpack.
  • Support ES6
  • Support Hot Module Replacement
  • Support Http Proxy
  • Default support vue2.0, support react
  • Support the global less parameter definition
  • Build UMD mode code
  • Only need to configure hey.conf.js configuration file

Installation

npm install -g hey-cli
 
# new version npm 
sudo npm install -g hey-cli --unsafe-perm=true --allow-root
 

Configuration

Add the hey.conf.js configuration file in the project root directory.

module.exports = {
  "port": 9002, //Port
  "dist": 'dist', //the root of the build file
  "timestamp": false, //the static folder generated by build with the static[timestamp] named folder
  "react": true, //support react project
  "webpack": { //webpack related configuration
    "console": false, //package compression whether to retain the console, the default is false
    "publicPath": "/", //public path
    "output": {
      // Output what documents, mainly html,
      // Default setting will load the same js file as the html file name for the entrance. 
      // Support for defining common packages.
      "./*.html": {
        // Load js file by default, and html automatically references. 
        //If not configured, the same js file as the html file name is automatically
        "entry":"./src/index.js", 
        "commons": [
          "common"
        ]
      }
    },
 
    //public package definition
    "commonTrunk": {
      "common": [
        "jquery",
        "vue",
        "vuex",
        "manba",
        "jsoneditor"
      ]
    },
 
    //define resolve, https://webpack.js.org/configuration/resolve/
    "resolve": {
      "alias": {}
    },
 
    //define global, https://webpack.js.org/plugins/provide-plugin
    "global": {
      "Vue": "vue",
      "$": "jquery",
      "log": "./js/common/log"
    },
 
    //define proxy, https://webpack.js.org/configuration/dev-server/#devserver-proxy
    "devServer": {
      "proxy": {
        "/api": {
          "target": "http://yoda:9000"
        }
      },
      historyApiFallback: true
    },
    //define externals, https://webpack.js.org/configuration/externals/
    "externals":{
 
    },
 
    //Define the global less parameter definition, you can use the globalVars parameter in any less
    globalVars: './static/css/var.less',
  },
 
  // The files that are not referenced are copied to the packaged folder when build
  "copy": [
    "./images/**/*",
    "./help/**/*",
    "./template/**/*"
  ]
};

Extended Configuration

You can expand and configure the following properties in the webpack configuration item in hey.conf.js:

  • plugins
  • module
  • node
  • externals
  • devServer

Specific use, please refer to webpack document.

Example

Load vue,vue-router

"hey"{
  "port": 9008,
  "timestamp": true,
  "dist": "gen",
  "webpack": {
    "publicPath": "/",
    "output": {
      "./*.html": {
        "entry":"./src/app",
        "common":["common"]
      }
    },
    "commonTrunk": {
      "common":["vue","vue-router"]
    },
    "global": {
      "Vue": "vue"
    },
    "devServer": {
      "historyApiFallback":true
    }
  }
}

External loading vue,vue-router

"hey"{
  "port": 9008,
  "timestamp": true,
  "dist": "gen",
  "webpack": {
    "publicPath": "/",
    "output": {
      "./*.html": {
        "entry":"src/app"
      }
    },
    "global": {
      "Vue": "vue"
    },
    "devServer": {
      "historyApiFallback":true
    },
    "externals": {
      "Vue": "window.Vue",
      "VueRouter": "window.VueRouter"
    }
  }
}

Common code to build UMD mode

Mainly used to build some of the common code, simple configuration can be used.
Because it is a public package packaged into UMD mode, do not use the import mode.

module.exports = {
  dist: "build",
  webpack: {
    umd: {
      entry: "./src/index.js",
      library: "Validator",
      filename: 'validator.js' //build generation /build/validator.js
    },
    externals: {
      "manba": "manba"  //The dependent package will not be packaged into the source code
    }
  }
};

Deploy

Start webpack server

hey dev
hey build
 
# use custom config file build project 
hey build -f index.esm.js

Parameter

//Identification is a development environment, or a production environment
const debug = process.env.NODE_ENV == 'development'; //production

Generate Project

Generate project using template.

hey init <project-name>
hey init <project-name> <github-url>
# hey init test heyui/hey-cli-template 

The current template

  • Simple: Base ES6 project
  • HeyUI: HeyUI project
  • Vue: Base Vue project
  • React: Base React project
  • ElementUI: Element project
  • iViewUI: iViewUI project

For specific projects, please refer to hey-cli-template

install

npm i hey-cli

Downloadsweekly downloads

6

version

1.5.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar