About Hbuild
Hbuild is a modern project starter kit
which allows you to build your own project by cli rapidly
Hbuild Use the hbuild-CLI command line tool to quickly generate a project startup suite after global registration. You can use Hbuild to build an H5 project, a VUE project (default with React-Router, vuex optional), or a React project. The suite contains the following features:
Features
- Vue2 / Vue-Router / Vuex
- Hot reloading for single-file components
- Webpack 2
- ES6
- LESS
- SASS
- React
- zepto
- autoprefixer
- mock server
- eslint
- Support for building multi-page applications
- offline mode support
- file hash
Zepto is introduced globally by default and can be used directly. The H5 project introduces the EJS template engine by default. Babel transcoding is supported by default. Support the HMR. File hash is supported to resolve cache issues.
You’d better have node >=4 and npm >=3 and gulp >=3.9 installed:
$ npm install -g hbuild-cli
$ hbuild init new-project
$ //or use
$ h init new-project //support short command
$ cd new-project
$ npm install || yarn
# edit files and start developing
$ npm run dev
# bundle all scripts and styles for production use
$ npm run prod
# lint your js code
$ npm run eslintCopy the codeLocal Templates
when you clone this project,you can use a template on your local file system:
$ git clone [email protected]:hawx1993/hbuild.git
$ hbuild init ./hbuild new-project
//or
$ h init ./hbuild new-projectCopy the code$ npm run dev; $NPM run dev-daily; $NPM run dev-daily; $NPM run dev-pre; $NPM run dev-pre; $NPM run daily; $NPM run daily; $NPM run pre; $NPM run pre; $NPM run prod; $NPM run prod; $NPM run eslint; $NPM run eslint; // Check the js code in the lib folder by defaultCopy the codecompile
1. Js code is compiled by Babel and built with WebPack by default.
2. The compiled HTML file is output to the build/ Pages directory by default. The HTML file name is the name of the parent directory in the SRC/Pages directory
3. The compiled static resource files (such as images, fonts, and JS files) are stored in the build/static directory to support file hash to solve the cache problem
4. Support code hot replacement, hot replacement failure will automatically refresh the entire page
1. The page of H5 project adopts EJS template engine and Zepto by default, which can be used directly.
2. The HTML and JS code is compressed when you execute commands on the distribution line
3. When you create a directory under Pages, the HTML file needs to be manually configured to reference static resources
CSS
1. Supports CSS preprocessors LESS and SASS, and other CSS processors gradually
2. By default, csS-in-js is used. You can configure whether to extract the CSS separately in the hbuild.config.js file
3. Supports screen adaptation solutions in media-Query + REM mode, which are stored in common.less files by default
4. Support PostCSS and autoprefixer
-
Mock: The mock data only needs the interface URI path to be the same as the mock directory
-
Interface: To replace the interface based on the environment, you need to configure the interface in the hbuild.config.js file and common/js/config file
-
Supports multi-entry files. You can create a directory under Pages, and the file name must start with index
-
String substitution:? _CDNPATH_? Will be compiled and replaced with build/static/hash directory
-
Entry files: scaffolding will read js files starting with index in the Pages directory as entry files by default, with their names written dead
-
To change the name of the default folder, you need to modify the corresponding file variables in the hbuild.config.js file
-
Extracting CSS and sourceMap functionality is only done in non-development mode.
The directory structure
.├ ─ ─ the README. Md ├ ─ ─ gulpfile. Js#Gulp file├ ─ ─ hbuild. Config. Js#Scaffold profile├ ─ ─ the mock#Mock data directory, keep the same path as the interface│ └ ─ ─ h5 ├ ─ ─ package. The json ├ ─ ─ the SRC#The source file│ ├ ─ ─ assets#Static resource directory for images or fonts│ ├─ ├─ common#Common code directory, CSS directory stores common CSS parts, the same as JS│ │ ├ ─ ─ CSS │ │ │ ├ ─ ─ common. Less │ │ │ └ ─ ─ common. SCSS │ │ └ ─ ─ js │ │ ├ ─ ─ API. Js#The API file│ │ ├ ─ ─ config. Js#The configuration file│ │ └ ─ ─ util. Js#Utility function files where you can store common methods│ ├ ─ ─ the components#component│ │ ├ ─ ─ counter#Counter VUE component│ ├─ ├─ ├─ exercises#Vue component entry file│ │ │ └ ─ ─ index. Vue │ │ ├ ─ ─ meta#H5 META Header module│ ├─ ├─ ├─ exercises#Vue routing module│ │ ├ ─ ├ ─ ├ ─ garbage#Vuex store module│ ├─ ├─ ├─ exercises#Third-party libraries│ └ ─ ─ pages#page│ └ ─ ─ the index#Home directory, you can create multiple directory structures under the Pages directory, as multi-entry files│ ├─ Index. HTML │ ├─ index#The index.js/index.jsx file is the entry file for webpack│ ├─ Index.jsx │ ├─ Index.less#The style file is introduced in the JS file, and you can set whether to extract the CSS file│ ├─ ├─ SCSS │ ├─#Page template module, which can be imported in the index.js/ JSX file│ ├─ ├─ ├─ ├.txt ├─ ├.txt ├─ ├.txtCopy the codeMIT © hawx1993