geekpack is a template generator for react and webpack combined SPA.
againe
- Compilation with webpack
- React and jsx
- react-router
- Stylesheets can be CSS, LESS, SASS, Stylus or mixed
- Embedded resources like images or fonts use DataUrls if appropriate
- import jQuery and expose global $ by default
- import bootstrap and react-bootstrap by default, and you can customise to meet you needs
- sample page included to help you start writing your compoment
- Development
- Development server
- Hot Module Replacement development server (LiveReload for Stylesheets and React components enabled)
- sourcemap to support browser debug
- Production
- Server example for prerendering for React components
Install Node.js envoriment
- install nvm
- install nodejs via nvm
- install tnpm
Please reference ali node.js manual
- tnpm install @ali/geekpack -g
- geekpack init myProject
- cd myProject && tnpm i
- npm start
- npm run build (bundle assets to build directory)
myProject/
|
|- src/
| |- index.js _______________________________ #
| |- routes.jsx _____________________________ # -
|
| |- styles/
| |- base.less ____________________________ #
|
| |- htmlTemplate/
| |- index.html ___________________________ # -
|
| |- config/
| |- bootstrap.config.js __________________ #
| |- bootstrap.config.less ________________ # Modify bootstrap variables here.
|
| |- components/
|
| |- samplePage/
| |- package.json _______________________ # -
| |- samplePage.jsx _____________________ # -
| |- samplePage.less ____________________ #
|
| |- customPages/
| |- readme.md __________________________ # -
|
| |- application/
| |- application.jsx ____________________ # -
| |- navigator.less _____________________ # variable
| |- package.json _______________________ # -
| |- routeCSSTransitionGroup.jsx ________ # -
| |- routeCSSTransitionGroup.less _______ #
|
| |- backendService/
| |- endpoint.js __________________________ #
- Generating new page
bash$ geekpack add *NewPage*
- List current pages
bash$ geekpack list
- Remove old page
bash$ geekpack remove pageX
- Add another entry
bash$ geekpack addentry login -p login.js
- Remove entry
bash$ geekpack rmentry login