saso-log v2.0.2
saso
一个零配置、渐进式的 web 打包工具,既能让你更加无痛的维护旧的 web 应用,也能让你更快开发现代化的 web 应用。
为什么使用 saso
当前的 web 开发人员几乎离不开 webpack,每次新项目的搭建都花费了大量的时间去配置 webpack 和配置相应的lint、test等环境,这些周边工作本应是一键完成的。
同时我们回忆一下,我们昨天维护的老旧的 web 应用,是否想要搭建环境花费了你太多时间呢?
以上的这些问题 saso 都可以一键帮你解决。
saso
的理念
saso
推崇入口文件为 .html
文件,这样更加符合早期的学习理念,也就是说最早你是怎样写 web 应用的,使用 saso
你就可以返回 .html
文件链接 .css
和 .js
文件的时代。
在你的项目中,你不需要配置和安装 webpack
、 stylus
、 babel
等任何配置项,假设你的项目只有.html
文件,你只要运行一下 saso
就可以帮你快速打包
└───index.html
└───index.css
└───main.js
快速开始
npm i saso -g
切换到你的项目中
saso build --watch
内置的 command
saso build
编译打包项目。
这个命令有以下 options
:
-w --watch
: 开启 watch
模式
-d --dev --development
: 使用 development
模式
-p --prod --production
: 使用 production
模式
--debug
: debug 模式,会辅助输出部分内容
-a --analyzer
: 使用 webpack-bundle-analyzer 分析 bundle
--config <configFile>
: 通过命令行指定 saso
的配置文件
--entry <entryFile>
: 通过命令行指定打包的入口文件
--port <port>
: 通过命令行指定端口,指定了 port
时,则必定开启监听模式
--no-clear
: saso
默认会清除上一次的编译信息以保持命令行的干净,使用这个参数则不会清除
saso dev
开启 webpack dev server
方便本地开发。
这个命令有以下 options
:
-d --dev --development
: 使用 development
模式
-p --prod --production
: 使用 production
模式
--debug
: debug 模式,会辅助输出部分内容
-a --analyzer
: 使用 webpack-bundle-analyzer 分析 bundle
--config <configFile>
: 通过命令行指定 saso
的配置文件
--entry <entryFile>
: 通过命令行指定打包的入口文件
--port <port>
: 通过命令行指定端口,指定了 port
时,则必定开启监听模式
--no-clear
: saso
默认会清除上一次的编译信息以保持命令行的干净,使用这个参数则不会清除
saso init
初始化一个项目,如:
saso init template-path my-project
saso 支持支持使用 npm 包作为项目的模版,也支持使用 git 地址:
saso init saso-template-typescript my-project
saso 官方提供了部分项目模版: 参见:https://www.npmjs.com/search?q=saso-template
编写 saso
配置文件
saso 的配置文件和其他开源工具一样,支持在 package.json
中的属性定义,也支持 rc 文件、.json
、.yaml
、.yml
、.js
文件,如可以在项目的文件夹中使用名为 saso.config.js
文件配置 saso
module.exports = {
watch: true,
port: 9000
}
saso
的配置项
- analyzer
Type: Boolean
Object
webpack-bundle-analyzer 的配置 options
,默认不开启 webpack-bundle-analyzer
这个插件,当这个配置有值的时候,则开启。
- authorInfo
Type: Boolean
Object
author-webpack-plugin 的配置options
,如果为 Boolean
值 true
则从最近的 package.json
中获取作者信息,如果为 Boolean
值 false
则不使用 author-webpack-plugin 插件。
- babel
Type: Object
目前只有以下选项,用来在 production
模式下禁用 babel-plugin-no-debugging 插件
babel: {
pluginProd: {
'no-debugging': false
}
}
- cliPlugins
Type: Array
- entry
Type: String
项目的入口文件,可以是 .js
、.html
文件,当入口是 .html
文件的时候,saso
会解析这个 .html
文件依赖的文件,因此推荐使用这种方式,这也更加符合前端开发者的思维。
如果不指定 entry
时,saso
会依次寻找以下文件作为入口文件 index.html
、 src/index.html
、index.js
、main.js
、src/index.js
、 src/main.js
。
- fileHash
Type: Boolean
Default: true
在 production 模式下最终的文件是否需要带 hash,除非特殊需要,否则建议始终为 true
- globalConfig
Type: Object
Default: {}
使用 webpack Default plugin 配置全局的变量,不过 saso 对这个配置做了优化,允许你传入非字符串,面对非字符串,saso 会自动使用 JSON.stringify
处理
- htmlMinify
Type: Boolean
| Object
只在
production
模式下生效
production
模式下对 html
文件的压缩处理,参考minification
- minify
Type: terser
| uglify
default: terser
使用 Uglifyjs 或者 Terser 对 js 进行压缩,默认使用 terser 并开启多线程压缩。
- mode
Type: String
Default: development
- outputPath
最终输出的文件夹,允许不传入绝对路径
Type: String
Default: dist
- plugins
Type: Array
- polyfillService
Type: Boolean
String
Default: false
polyfill-service 的链接,当为 Boolean
值 true 的时候,默认使用国内阿里的CDN //polyfill.alicdn.com/polyfill.min.js
。
- port
Type: Number
Default: 10000
- publicPath
Type: String
,
Default: /
webpack 的 publicPath
配置
- target
Type: async-node
electron-main
electron-renderer
electron-preload
node
node-webkit
web
webworker
Default: web
webpack 的 target 选项,配置编译后的运行平台。
Hooks
saso
内部的工作原理是依赖于 钩子(Hooks) 的,在如今前端大繁荣的情况下,saso
不可能能够满足所有的情况,当你需要自定义 saso
时,那么这些 Hooks
将非常有用。
afterConfigure
处理完 saso
配置后触发
params: config
afterConfigureAsync
afterConfigure
Async 版本
params: config
beforeCompile
webpack 编译前触发
params: webpackChain
一个 webpack-chain 实例
beforeCompileAsync
beforeCompile
Async 版本
params: webpackChain
plugins
saso
的 plugin
分为 cli
的 plugin
和普通的 plugin
。
cli
的 plugin
是为了拓展 saso
的命令,这在使用 saso
来拓展功能以符合团队需求时非常有用,如:你的团队想要通过 saso releaseCDN
这个命令来将你的静态资源一键发布到 CDN,这个需求便可以通过编写 saso
的 cli
命令来实现。
saso
的普通 plugin
通常是为了拓展 saso
的 webpack
配置,当然它还可以做很多其他的事情。
如果你熟悉 webpack
的 plugin
编写,saso
的 plugin
设计受到了 webpack
的启发,因此你能够快速编写你的 plugin
。
接下来就是编写一个 cli
plugin
和普通 plugin
的实例
TODO