2.0.2 • Published 4 years ago

saso-log v2.0.2

Weekly downloads
5
License
ISC
Repository
github
Last release
4 years ago

saso

一个零配置渐进式的 web 打包工具,既能让你更加无痛的维护旧的 web 应用,也能让你更快开发现代化的 web 应用。

为什么使用 saso

当前的 web 开发人员几乎离不开 webpack,每次新项目的搭建都花费了大量的时间去配置 webpack 和配置相应的lint、test等环境,这些周边工作本应是一键完成的。

同时我们回忆一下,我们昨天维护的老旧的 web 应用,是否想要搭建环境花费了你太多时间呢?

以上的这些问题 saso 都可以一键帮你解决。

saso 的理念

saso 推崇入口文件为 .html 文件,这样更加符合早期的学习理念,也就是说最早你是怎样写 web 应用的,使用 saso 你就可以返回 .html 文件链接 .css.js 文件的时代。

在你的项目中,你不需要配置和安装 webpackstylusbabel 等任何配置项,假设你的项目只有.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,如果为 Booleantrue 则从最近的 package.json 中获取作者信息,如果为 Booleanfalse 则不使用 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.htmlsrc/index.htmlindex.jsmain.jssrc/index.jssrc/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

sasoplugin 分为 cliplugin 和普通的 plugin

cliplugin 是为了拓展 saso 的命令,这在使用 saso 来拓展功能以符合团队需求时非常有用,如:你的团队想要通过 saso releaseCDN 这个命令来将你的静态资源一键发布到 CDN,这个需求便可以通过编写 sasocli 命令来实现。

saso 的普通 plugin 通常是为了拓展 sasowebpack 配置,当然它还可以做很多其他的事情。

如果你熟悉 webpackplugin 编写,sasoplugin 设计受到了 webpack 的启发,因此你能够快速编写你的 plugin

接下来就是编写一个 cli plugin 和普通 plugin 的实例

TODO

2.0.2

4 years ago

1.6.3

5 years ago

1.6.1

5 years ago

1.6.0

5 years ago

1.5.0

5 years ago

1.4.0

5 years ago

1.3.0

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago