create-hengine-app
Version:
Create a development environment for your `hengine` app.
97 lines (67 loc) • 5.17 kB
Markdown
# create-hengine-app
> Create a development environment for your `hengine` app.
## Usage
Just execute one of the following command to get a development environment where `my-app` should be replaced with the name of your app:
```bash
npm init hengine-app my-app
# or
npx create-hengine-app my-app
```
After the dependencies are installed, you will be able to start your development. (See the [Workflow](#workflow) section.)
In addition, you can also pass some arguments to it:
```txt
create-hengine-app <name> [options]
<name> Your app name
-h, --help Show help info
-d, --dir <dir> The directory to create
Default: the app name
-v, --ver <ver> The version of `hengine` to use
Default: the latest
-p, --port <port> The local port to use
Default: 8080
```
Please note that if you omit the version of `hengine` to use, the latest version will be fetched and adopted as input. If you want to change the version after initialization, just follow this:
1. Execute `npm i -D hengine@<version>` to update the development dependency where `<version>` should be replaced with the version you want.
2. Open `/dist/index.html` and modify the lib version to load. (`/test/index.html` loads the lib from the development dependency, so don't worry about it.)
## Workflow
This package initializes a typical development workflow for `hengine` which is explained below.
### Folder Structure
```txt
my-app/
+-- node_modules/ Dependency folder
+-- dist/ Files for distribution
| +-- index.css Page styles
| +-- index.html Index page for production
| `-- index.js Bundled script file (generated by building script)
+-- src/ Source code (Some initial code will be provided)
| +-- index.js The entry point of scripts
| +-- common.js Common parts
| `-- menuScene.js The declaration of the initial menu scene
+-- test/ Test folder
| +-- index.html Index page for development
| +-- inspector.js The declaration of the inspector
| `-- server.js The declaration of development server
+-- package.json The declaration file of the package
+-- package-lock.json Dependency lock file
+-- rollup.config.js Rollup config file
`-- tsconfig.json TypeScript config file
```
### Scripts
You can run any of the scripts by executing `npm run <script>` in the root of your app directory where `<script>` should be replaced with the script name.
| script name | description |
|:-----------:|:------------------------------------------|
| `start` | Launch the production server for testing. |
| `test` | Launch the development server. |
| `build` | Bundle the scripts for distribution. |
| `typecheck` | Run type check. (Using TypeScript) |
### Development
Generally speaking, you just need to write your code in `src` folder and use the development scripts listed above to test and build your app.
When you are developing your app, it is recommended to execute `npm test` to start the development server and test your app in your browser. In the page for development, scripts are directly loaded from source files so that you can access your result immediately after your code changes. In addition, the inspector script will be injected into the app to provide debug information and you can modify `/test/inspector.js` to adjust it.
If you want to get the production version of your app, execute `npm run build` to bundle the scripts into `/dist/index.js`, which is a bundled and optimized version, and your app for production will be ready in the `dist` folder. Then, you can execute `npm start` to start the production server which only serves the `dist` folder so that you can see the production result of your app in your browser.
The development environment also provides type checking functionality so that the intellisense functionalities of your editor can work properly. Besides, you can execute `npm run typecheck` to do type checking manually and modify `/tsconfig.json` to customize your TypeScript settings. For more information about `TypeScript`, please visit its official website: [www.typescriptlang.org](https://www.typescriptlang.org).
By the way, please note that only script files should be placed in the `src` folder and other resource files should be put in the `dist` folder and referenced relative to `/dist`. For instance, the initial style sheet file, `/dist/index.css`, is referenced in index pages as `./index.css`. Moreover, the scripts are loaded as modules in the development server, so you have to use the global variable `HE` to access the APIs instead of importing them from the module `hengine` and you can refer to the given initial code to get an example.
## Links
- [Repository of `hengine`](https://github.com/huang2002/hengine)
- [Contributing Guide](./CONTRIBUTING.md)
- [Changelog](./CHANGELOG.md)
- [License (MIT)](./LICENSE)