打包框架

需要先安装 "@bale-tools/utils。

• 通过 webpack 打包, 支持 vue、react。
• 打包单个文件,js、ts、tsx、less、sass、css、vue。
• 打包整个ts 项目, 需要在 ts 项目根目录下添加 tsconfig.json 文件。

webpack

• bin

1--skip checkVersion Skip the version check.
2-s, --script <script> Start or build a project.
3-n, --env <env> Setup `Environment`, such as `development` or `production`.
4-e, --entry <entry> Add an entry point.
5-o, --output <output> Output files dir, default `dist`.
6-u, --url <url> Setup a visit url.
7-p, --port <port> Setup webpack dev server port.

examples:

1bale-mutate-service -s start -n development -e ./src/main.ts -o build -u main.js -p 5000

• api

1// api options
2export interface IApiOptions {
3  mode?: 'development' | 'production'
4  target?: string | Array<string> // 默认为 ['web' 'es5'] 可为 node
5  entry?: string | object
6  output?: string | object
7  loaders?: Array<object> // loaders
8  plugins?: Array<any> // plugins
9  externalsType?: string // 指定输出类型 默认为 commonjs https://webpack.docschina.org/configuration/externals/#externalstype
10  externals?: object // externals
11  alias?: object // 配置别名
12  settings?: IApiSettingOptions
13}
14
15// api settings
16export interface IApiSettingOptions {
17  port?: number // 服务器启动端口
18  openBrowser?: boolean // 启动服务器后是否打开浏览器
19  rootDir?: string // 项目根目录 默认为 process.cwd()
20  publicDir?: string // 静态文件目录 默认为根目录下的 public 目录
21  projectUrl?: string // 项目访问路径 默认为 '/' 或者直接取 .env.xxx 中的 PROJECT_URL
22  envName?: string // .env.* 文件名称 默认根据 script 获取
23  useSourceMap?: boolean // 是否使用源码 生产环境默认为 false
24  routerMode?: 'hash' | 'history' // 路由 hash | history 生产环境为 history
25  noParse?: Array<string> | Function // noParse 属性
26  experiments?: IExperimentsOptions | undefined | boolean // experiments 配置 本地启动默认为 true, doc see `https://webpack.js.org/configuration/experiments/#experiments`
27  generateReport?: boolean // 生产环境是否生成报告 默认为 true
28  visitSuffixUrl?: string // 访问路径后缀
29  providePlugin?: { [K: string]: any } // 访问全局变量插件
30  definePlugin?: object // 注入环境变量插件
31  jsLoader?: 'babel-loader' | 'esbuild-loader' | 'swc-loader' | undefined | null // js loader, default `babel-loader`
32  jsLoaderInclude?: Array<any> // js loader include
33  useMinimize?: boolean // 是否使用 min files(js、css、html) 生产环境默认为 true
34  imageMinimizer?: boolean | IImageMinimizerOptions | undefined // 图片压缩
35  compress?: boolean | ICompressOptions | undefined // 打包完成后是否使用压缩包 生产环境默认为 true
36  useInlineChunkHtml?: boolean // 是否把较小的 chunk 打入到html中 默认为 true
37  usePurgecssPlugin?: boolean // 是否使用 purgecssPlugin 插件 默认为 true
38  useMiniCssPlugin?: boolean // 是否使用 miniCssPlugin 插件 生产环境默认为 true
39  useCopyPlugin?: boolean // 使用 copy plugin 默认为 true 拷贝 public 目录下的文件
40  useHtmlPlugin?: boolean // 是否需要生成 html plugin
41  useGzipPlugin?: boolean // 生产环境是否开启 gzip 压缩 默认为 true
42  usePwaPlugin?: boolean // 生产环境是否使用 pwa 默认为 true
43  usePreloadPlugin?: boolean // 生产环境 script 是否开启 preload 默认为 true 配合 useHtmlPlugin 使用
44  useSplitChunks?: boolean // 是否使用 split chunks 默认为 true
45  useRuntimeChunk?: boolean // 是否抽离多个使用入口到 runtime 中 默认为 true
46  useTerserWebpackPlugin?: boolean // 是否在生产环境中使用 terser-webpack-plugin 默认为 true
47  htmlTemplatePath?: string // index.html 路径 默认为根目录下的 public/index.html
48  usePreLoader?: boolean // 是否使用预加载 默认为 false
49  threadLoader?: IRateThreadLoaderOptions // thread-loader
50  px2remLoader?: IRatePx2remLoaderOptions // 是否使用 px2rem-loader
51  resourceLoader?: IRateResourceLoaderOptions // 资源配置
52}
53
54// image minimizer see https://www.npmjs.com/package/image-minimizer-webpack-plugin?activeTab=readme
55export interface IImageMinimizerOptions {
56  minimizer?: 'imagemin' | 'squoosh' | 'sharp' // default imagemin
57  options: object // options
58}
59
60// compress  config
61export interface ICompressOptions {
62  enable?: boolean // 是否启用 默认为生产环境启用
63  name?: string // 压缩包名称默认为项目名称
64  suffix?: string // 默认为 .zip
65  output?: string // 输出目录 默认为打包输出目录
66  deleteOutput?: boolean // 是否删除打包输出目录 默认为 true
67}
68
69// https://webpack.js.org/configuration/experiments/#experiments
70export interface IExperimentsOptions {
71  backCompat?: boolean // Enable backward-compat layer with deprecation warnings for many webpack 4 APIs.
72  buildHttp?: boolean | object // allowedUris、cacheLocation、frozen、lockfileLocation、proxy、upgrade、
73  css?: boolean // Enable native CSS support. Note that it's an experimental feature still under development and will be enabled by default in webpack v6, however you can track the progress on GitHub.
74  cacheUnaffected?: boolean // Enable additional in-memory caching of modules which are unchanged and reference only unchanged modules.
75  futureDefaults?: boolean // Use defaults of the next major webpack and show warnings in any problematic places.
76  lazyCompilation?: boolean | object // Compile entrypoints and dynamic imports only when they are in use. It can be used for either Web or Node.js.
77  outputModule?: boolean // Once enabled, webpack will output ECMAScript module syntax whenever possible. For instance, import() to load chunks, ESM exports to expose chunk data, among others.
78  asyncWebAssembly?: boolean // upport the new WebAssembly according to the updated specification, it makes a WebAssembly module an async module. And it is enabled by default when
79  layers?: boolean // Enable module and chunk layers.
80  syncWebAssembly?: boolean // Support the old WebAssembly like in webpack 4.
81  topLevelAwait?: boolean // Support the Top Level Await Stage 3 proposal, it makes the module an async module when await is used on the top-level. And it is enabled by default when experiments.futureDefaults is set to true.
82}
83
84// use thread-loader
85export interface IRateThreadLoaderOptions {
86  workerParallelJobs?: number // 一个 worker 进程中并行执行工作的数量 默认为 20
87  workerNodeArgs?: Array<any> // 额外的 node.js 参数
88  poolRespawn?: boolean // 允许重新生成一个僵死的 work 池 这个过程会降低整体编译速度 并且开发环境应该设置为 false
89  poolTimeout?: number // 闲置时定时删除 worker 进程 默认为 500ms 可以设置为无穷大，这样在监视模式(--watch)下可以保持 worker 持续存在
90  poolParallelJobs?: number // 池分配给 worker 的工作数量默认为 200 降低这个数值会降低总体的效率，但是会提升工作分布更均
91  name?: string // 池的名称 可以修改名称来创建其余选项都一样的池
92}
93
94// use px2rem-loader
95interface IRatePx2remLoaderOptions {
96  remUint?: number // 默认为 75
97  remPrecision?: number // 默认为 8
98}
99
100interface IRateResourceLoaderOptions {
101  image?: IRateImageResourceOptions
102}
103
104// resource
105interface IRateImageResourceOptions {
106  useInline?: boolean // 是否打成内置的 base64 默认为打成图片
107  limit?: number // 默认为 10000 字节
108}

examples:

1const { WebpackCompiler } = require('@bale-tools/mutate-service')
2const opts = {} // opts 见 IApiOptions
3const script = 'start' // 'start', 'build', 'simulate', 'prod'
4WebpackCompiler(script, opts)

cock

• bin

1--skip checkVersion Skip the version check.
2-e, --entry <entry> Add an entry point.
3-o, --output <output> Output files dir, default `dist`.
4-m, --mode <mode> Set compile mode, such as `commonjs`, `es2015` etc, default `commonjs`.
5-f, --format <format> The format of output bundle. Can be `es`, `umd`, `amd`, `iife`, `cjs`, `system`, `all`, if there are multiple, please use `,` separate.

examples:

1bale-cock-service -e src -o build -m commonjs -f all

• api

1// js options
2export interface ICompileJsOptions {
3  mode?: 'commonjs' | 'ES2015' // ts 输出 mode, 'commonjs' | 'ES2015', 默认为 commonjs
4  appRootDir: string // 项目根目录
5  filePath: string // 文件全路径
6}
7
8// style options
9export interface ICompileStyleOptions {
10  appRootDir: string // 项目根目录
11  filePath: string // 文件全路径
12}
13
14// vue options
15export interface ICompileVueOptions {
16  mode?: 'commonjs' | 'ES2015' // ts 输出 mode, 'commonjs' | 'ES2015', 默认为 commonjs
17  appRootDir: string // 项目根目录
18  filePath: string // 文件全路径
19}
20
21// ts options
22export interface ICompileTsOptions {
23  mode?: 'commonjs' | 'ES2015' // ts 输出 mode, 'commonjs' | 'ES2015', 默认为 commonjs
24  appRootDir?: string // 项目根目录
25  entryDir?: string // entry point, 默认为 src 或 lib
26  outputDir?: string // 输出目录, 默认为 dist
27  excludes?: Array<string> // 过滤的文件夹目录, 默认为 node_modules
28  useDeclaration?: boolean // 是否生成 .d.ts 文件
29  done?: Function // 完成后的回调
30}
31
32// rollup options
33export interface IRollupOptions {
34  formats?: Array<string> | string // 输出格式, 单个直接输入, 多个用数组: ['umd', 'es', 'amd', 'iife', 'cjs', 'system'] | 'all', `all` 为输出多个格式
35  appRootDir?: string // 项目根目录
36  input?: string // rollup 输入
37  output?: { [K: string]: any } // rollup 输出
38  min?: boolean // 是否最小化, 默认为 true
39  plugins?: Array<any> // rollup plugins
40  done?: Function // 完成后的回调
41}
42
43// compile options
44export interface ICookCompilerOptions {
45  mode?: 'commonjs' | 'ES2015' // ts 输出 mode, 'commonjs' | 'ES2015', 默认为 commonjs
46  rootDir?: string // 项目根目录, 默认为 process.cwd()
47  entry: string // 单个文件编译文件
48  outputDir?: string // 输出目录, 默认为 dist
49  excludes?: Array<string> // 过滤的文件夹目录, 默认为 node_modules
50  callback?: Function // 每个文件的回调
51  rollupSettings?: IRollupOptions // rollup 设置
52  tsSettings?: ICompileTsOptions // ts 设置
53  done?: Function // 完成后的回调
54}

examples:

1const { CockCompiler } = require('@bale-tools/mutate-service')
2const opts = {} // opts 见 ICookCompilerOptions
3const type = 'ts' // 'js', 'ts', 'style', 'vue'
4CockCompiler(type, opts)