muse

工程级前端构建工具

更新日志

安装

npm install -g @mochen/muse

OR

sudo npm install -g @mochen/muse --unsafe-perm

项目目录约束

.
├── README.md
├── dist
│   └── front
│       └── online
└── websrc # 前端源文件
    └── front # 工程名称
        ├── node_modules
        ├── package-lock.json
        ├── package.json
        ├── src # 工程源文件
        │   ├── common # common 不作为页面编译，存放公共文件
        │   └── about # 最终会编译为 about.html, 文件夹内部是他的文件资源
        │       ├── index.html
        │       ├── index.js
        │       └── index.less
        └── stylelint.config.js

项目结构建设完毕后。需要先执行两个命令用于初始化项目。

muse create muserc
muse create browser

参数配置

详细参数配置说明，参看.muserc.js

使用

Build

$ muse build [page]

该命令与watch命令互斥，属于两种开发构建模式。

参数

[page]参数不必须，默认为all，也即所有页面。

如果page不等于all，则使用watch模式，进程会一直监听变化，但不会刷新页面，需要手动刷新。

如果page等于all，在构建之前会清空对应的dist目录。

命令

build模式下，会生成实体文件。也就意味着，你可以将文件作为后端模板使用。所以这个模式也被用于前后端不分离的项目开发模型。

Watch

$ muse watch [page]

该命令与build命令互斥，属于两种开发构建模式。

参数

[page]参数不必须，默认为all，也即所有页面。

命令

watch模式下，默认会生成本地一个http server用于预览。不会产生实体文件。

可以通过配置文件，将其配置为sock模式。用于需要nginx的项目。可将sock在nginx反向代理。请求会落到webpack-dev-server。sock模式需要具备一定的工程思维和必要的nginx配置能力。

Deploy

$ muse deploy [page]

参数

[page]参数不必须，默认为all，也即所有页面。

命令

deploy保留了[page]参数。但这不意味着deploy某一个页面是个正确的行为。

webpack在进行多页项目构建时，会针对整个项目做出优化。deploy某一个页面，会使得无法对整个项目进行优化。

除非你要debug某个页面，否则，不建议deploy单独的页面。

New

$ muse new [page]

参数

[page]参数必须，需指定一个页面名称。

命令

该命令可快速创建一个页面代码文件夹。如下所示。

该目录规则可以通过.muserc.js中的pagePath修改。

about
└── static
    ├── about.html
    ├── about.js
    └── about.less

Create

$ muse create [file]

参数

[file]参数可选值 ['muse', 'eslint', 'babel', 'postcss', 'stylelint', 'browserlist', 'tsconfig']

命令

muse内置了各种rc文件，如果需要个性化，可以自己生成rc文件到项目中，自行修改。

Lint

$ muse lint [fix]

参数

[fix] 非必须，可选值['fix']

命令

代码检测，根据.muserc.js中的配置进行js/css代码检测。增加fix参数，可自动修复一些可以被自动修复的错误。

Lint:fix

$ muse lint:fix

命令

muse lint fix的别名