yume

A tool to make external web component libraries.

Quick start

Install yume:

npm install yume -g

New project:

yume new demo

Install dependencies:

cd demo && git init && npm install

1. Directory structure.

|-- project/
    |-- src/ Source directory.
    |-- dev/ Development directory.
    |-- dist/ Production directory.
    |-- ...

• src: Source directory, where to place all source codes, like css, less, js, images....
• dev: Development directory, system reserved temporary directory to debug in browser.
• dist: Production directory, system reserved temporary directory, generated after building.

2. Command line.

yume <command> [args]

2.1 new: New a project.

yume new projectName

• since: v0.0.1

2.2 dev: Watch files' changes, with hot replacing and reloading, and start a local server for debug.

yume dev moduleName

• Local server root directory is project root process.cwd().
• since: v0.0.1

2.3 dist: Pack source codes and static files into library files.

yume dist moduleName

• since: v0.0.1

2.4 Arguments.

• moduleName: Handling module(defined in modules of yume.config.js), default is index.

3. Project config.

Project config is defined in yume.config.js. See Detail project config.

3.1 Custom config for each developer.

Each developer can have his/her own private config. See Project config - localOptions.

3.2 Custom config for each module.

Each module can have its own private config. See Project config - moduleOptions.

3.3 Custom config for each command.

Each command can have its own private config. See Project config - commandOptions.

3.4 More custom config from command line.

You can override config by pass arguments from command line.

Example:

yume dev demo --devServerPort 9999

Now, the devServerPort config option become 9999.

Also, you can put any extra configs through command line.

yume dev demo --extraArg1 extraValu1 --extraArg2 extraValu2 --extraArg3

In your project config from yume.config.js, there will be 3 more fields.

{
  ... // Original existed options.
  extraArg1: extraValu1,
  extraArg2: extraValu2,
  extraArg1: true
}

Relative reference: minimist.

3.5 Custom config loading sequences.

localOptions -> moduleOptions -> commandOptions -> cmdValues

The later loaded config values will override the former loaded config values.

4. Use mock data in developing if needed.

When in developing, sometimes you'll need to do ajax tasks, and using mock data to debug locally is recommended. There are two ways:

4.1 Use json files.

You can put all your json files into data directory(data is recommended, not required), like this:

|-- /data/ Mock data files directory
    |-- file1.json
    |-- file2.json
    |-- ...

Now, you can access to those files through /data/file1.json, /data/file2.json, ....

4.2 Use js files.

Using json files has a big disadvantage, that we could not make a if, loop etc, to dynamically get response data. Thus, we can use js files to avoid this.

|-- /data/ Mock data files directory
    |-- file1.js
    |-- file2.js
    |-- ...

Now, you can access to those files through /data/file1, /data/file2, ....

Normally, a js file should be written like this:

module.exports = (req, res) => {
    // Do everything you want.
};

Arguments req, res refer to Node Http.

Note.

• The js file name should not have . character, or it will not take effectively.
• You can disable this by set mock: false in yume.config.js.

4.3 Your own ways.

Also, you can use your own way to make it, like mock.js.

4.4 With see-ajax, see-fetch.

You can use see-ajax, see-fetch to develop more efficient.

5. Packages

• webpack: 3.12.0
• webpack-dev-middleware: 2.0.6
• webpack-hot-middleware: 2.22.2
• browser-sync: 2.24.4
• gulp: 4.0.0

More to see package.json.

6. Upgrade to new version from old versions.

See Change log, Upgrade log.

7. Examples

See yume examples.