Universal front-end cli, we just support react enviroment now.

Features

• Dynamic Import
• Code Splitting
• i18n
• Decorator Support
• react-erro-overlay support
• Auto restart server after modified config(mete.config.js and .eslintrc)
• HMR support
• Custom webpack, eslint, babel config support
• Redux ecosystem support
• Displaying lint output in the editor
• Sass support
• Less support
• Launch editor support (Please sure that editor command has been intalled in PATH)
• Production server support
• DLL support

TODO:

• 自动安装缺失依赖
• 打开浏览器窗口
• 自动选择端口
• 升级postcss-prese-env
• 升级browserlist 到3

Getting Started

Installation

$ npm install -g mete-cli
or 
$ yarn global add mete-cli (recommend)

Usage

1. Create an new project

$ mete init my-app --temp=react-h5

2. Start in development

$ mete dev

Development Environment

Before starting your project, you should run mete dll for building dll files! Otherwise, you will get the following error message.

The following Webpack DLL manifest is missing: react_vendor_manifest.json
Expected to find it in /Volumes/Mac2/CHUKUI/PROJECTS/mete-react-app/dll
Please run: mete dll

$ mete dev

you can run mete dev -h for more help message.

Production Build Environment

$ mete build [dir]

the default dir is dist.

you can run mete build -h for more help message.

Production Environment

$ mete prod [-H] [-p]

you can run mete prod -h for more help message.

DLL Build

$ mete dll

Gennerator

We provide some code template for coding quickly.

Just use

$ mete generate

If something ok, you will see the list of generators.

More

Show more usage.

$ mete -h

Custom Config

For custom advanced behavior of mete, you can create a mete.config.js in the root of your project directory (next to app and package.json).

mete.config.js is a regular Node.js module, not a JSON file. It gets used by the mete dev server and build phases, and not included in the browser build.

Custom webpack config

In order to extend our usage of webpack, you can define a function that extends its config via mete.config.js.

Example:

use a function:

// Example mete.config.js for adding a loader that depends on scss-loader
module.exports = {
  webpack: (config, {}) => {
    config.module.rules.push({
      test: /\.scss/,
      loader: 'scss-loader'
    })

    return config
  }
}

Customizing babel config

In order to extend our usage of babel, you can simply edit a .babelrc file at the root of your app mete had provided.

Customizing eslint config

In order to extend our usage of eslint, you can simply edit a .eslintrc file at the root of your app mete had provided.

Project Structure