Zero config CLI bundler based on webpack for web, nodejs and electron application.
-
Local
-
Install
$ npm install -D @tybys/ty webpack webpack-dev-server
-
Writing scripts in package.json
{ "scripts": { "serve": "ty serve", "build": "ty build" } }
-
-
Global
-
Install
$ npm install -g @tybys/ty
-
Run in project root directory
$ ty build
-
build
- Bundle production code. Default output directory:dist
orresources/app
.serve
- Start local development server.watch
- Watch source code and write bundled code to local files.inspect
- Inspect webpack config.vscode
- Generate or modify.vscode/launch.json
.dev
- [Electron project only] Start local development server and launch electron.pack
- [Electron project only] Pack application. Default output directory:dist
.start
- [Electron project only] Launch electron.
tyconfig.js
or tyconfig.ts
in your project root directory. If you want to use typescript to write configuration, you need to install ts-node
first.
-
mode
{'development' | 'production'} Default:'production'
forbuild
andpack
,'development'
for other command. -
devServerHost
{string} Forserve
anddev
. Default:'localhost'
. -
devServerPort
{number} Forserve
anddev
. Default:8090
. -
devServerOpenBrowser
{boolean | string} Web project only. Forserve
anddev
. Default:false
. -
target
{'web' | 'electron' | 'node'} Ifelectron
in yourdevDependencies
it is'electron'
, otherwise it is'web'
. -
entry
- Must be absolute path. Default:const path = require('path') const projectRoot = path.join(config.context || process.env.TY_CONTEXT || process.cwd()) module.exports = { entry: { web: { app: [path.join(projectRoot, 'src/index')] }, node: { main: [path.join(projectRoot, 'src/index')] }, renderer: { renderer: [path.join(projectRoot, 'src/renderer/renderer')] }, main: { main: [path.join(projectRoot, 'src/main/main')] }, preload: null } }
-
output
- Default:module.exports = { output: { web: 'dist', node: 'dist', renderer: `${localResourcesPath}/app/renderer`, main: `${localResourcesPath}/app/main`, preload: `${localResourcesPath}/app/preload` } }
-
contentBase
{string} Forwebpack-dev-server
. Default:'dist'
(web target) or'resources'
(electron target). -
localResourcesPath
{string} Simulate electron'sresources
directory in local development. Default:'local_resources'
. -
extraResourcesPath
{string} Extra contents to be copied toresources
dir. Default:'resources'
. -
publicPath
{string} Default:'/'
(web target) or'/app/renderer/'
(electron target) in development environment,''
in production. -
staticDir
{string} Be copied to web root. Default:'public'
. -
distPath
{string} Forpack
command. Default:'dist'
. -
iconSrcDir
{string} Forpack
command. Application icons:iconSrcDir ├── 16x16.png (linux) ├── 24x24.png (linux) ├── 32x32.png (linux) ├── 48x48.png (linux) ├── 64x64.png (linux) ├── 128x128.png (linux) ├── 256x256.png (linux) ├── 512x512.png (linux) ├── 1024x1024.png (linux) ├── app.ico (windows) └── app.icns (mac)
-
indexHtml
{any[]} Pass toHtmlWebpackPlugin
. Default:['public/index.html']
. -
assetsPath
{string} Where the static assets should be output. Relative tooutput
. Default:''
. -
arch
{string} Forpack
command. Default:process.arch
. -
inno
- For windows. Default:module.exports = { inno: { src: '', // custom inno script path. appid: { ia32: '', // UUID x64: '' // UUID }, url: '', // display in installer def: {} // declare inno script variable } }
-
vue
{undefined | 0 | 1} Force to use Vue.js or not. Default:undefined
. -
webpack
{undefined | number} Force to specify the webpack version. Default:undefined
. -
ts
{undefined | 0 | 1} Force to use typescript or not. Default:undefined
. -
eslint
{undefined | 0 | 1} Force to use ESLint or not. Default:undefined
. -
sass
{undefined | 0 | 1} Force to use sass or not. Default:undefined
. -
less
{undefined | 0 | 1} Force to use less or not. Default:undefined
. -
stylus
{undefined | 0 | 1} Force to use stylus or not. Default:undefined
. -
generate
{undefined | 0 | 1} Force to generate missing files or not. Default:undefined
. -
context
{string} Project root directory. Default:''
. -
progress
{boolean} Show progress. Default:false
. -
define
{{ [key: string]: string }} Pass towebpack.DefinePlugin
. Default:{}
. -
devtool
{{ development: string; production: string }} Pass towebpackConfig.devtool
in different mode. Default:{ development: 'eval-source-map', production: 'source-map' }
. -
productionSourcemap
{boolean} Whether to generate sourcemap in production mode. Default:false
. -
extractcss
{undefined | 0 | 1} Whether to extract CSS. Default:undefined
. -
cssLoaderOptions
{any} Default:{}
. -
postcssLoaderOptions
{any} Default:{}
. -
stylusLoaderOptions
{any} Default:{}
. -
lessLoaderOptions
{any} Default:{}
. -
sassLoaderOptions
{any} Default:{}
. -
eslintPluginOptions
{any} Default:{}
. -
alias
{{ [name: string]: string }} Pass towebpackConfig.resolve.alias
. Default:{ '@': path.join(config.context || process.env.TY_CONTEXT || process.cwd(), 'src') }
-
tsconfig
- For TypeScript project. Default:module.exports = { tsconfig: { web: 'tsconfig.json', node: 'tsconfig.json', renderer: 'src/renderer/tsconfig.json', main: 'src/main/tsconfig.json', preload: 'src/preload/tsconfig.json' } }
-
proxy
- Pass towebpack-dev-server
. Default:{}
. -
packHook
- For electron packing process. Default:undefined
.module.exports = { packHook: { beforeBuild (config) {}, beforeBuildCopy (config, copyPaths) {}, beforeWritePackageJson (config, pkg) { return pkg }, beforeInstall (config, tempAppDir) {}, afterInstall (config, tempAppDir) {}, beforeZip (config, appDir) {}, afterZip (config, zipPath) {} } }
-
packTempAppDir
- Tempapp
dir when packing. Default:path.join(distPath, '_app')
. -
packagerOptions
- Pass toelectron-packager
. Default:{}
. -
asarOptions
- Pass toasar.createPackageWithOptions()
. Default:{ unpack: '*.node' }
. -
nodeModulesAsar
- Packnode_modules
tonode_modules.asar
and place it withapp.asar
together. Default:false
. -
nodeExternals
- Pass towebpack-node-externals
. Default:{ allowlist: ['tslib'] }
. -
prune
- For pruning node_modules folder after electron packing process. See@tybys/prune-node-modules
. Default:{ production: true }
. -
statsOptions
- For webpack output. Default:module.exports = { statsOptions: { colors: true, children: false, modules: false, entrypoints: false } }
-
terserPlugin
- Forterser-webpack-plugin
. Default:module.exports = { terserPlugin: { parallel: true, extractComments: false, terserOptions: { ecma: 2018, output: { comments: false, beautify: false } } } }
-
htmlMinify
- Forhtml-webpack-plugin
minify option. Default:module.exports = { htmlMinify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true, collapseBooleanAttributes: true, removeScriptTypeAttributes: true } }
-
cssOptimize
- Pass tonew CssMinimizerWebpackPlugin(cssOptimize)
. Default:module.exports = { cssOptimize: { minimizerOptions: { preset: [ 'default', { mergeLonghand: false, cssDeclarationSorter: false } ] } } }
-
configureWebpack
- Modify webpack config. Default:module.exports = { configureWebpack: { // web (webConfig: WebpackConfiguration): void web (webConfig) {}, // node (nodeConfig: WebpackConfiguration): void node (nodeConfig) {}, // renderer (rendererConfig: WebpackConfiguration): void renderer (rendererConfig) {}, // main (mainConfig: WebpackConfiguration): void main (mainConfig) {}, // preload (preloadConfig: WebpackConfiguration): void preload (preloadConfig) {} } }
-
command
- Your custom command. Default:undefined
module.exports = { command: { // [command: string]: ( // tyconfig: TyConfig, // args: minimist.ParsedArgs, // getCommand: (command: string) => undefined | ((tyconfig: TyConfig) => void) // ) => void hello (tyconfig, args, getCommand) { console.log('hello.') } } }
--mode
--target
--arch
--webpack
- Force to specify webpack version.--ts
- Force to use typescript or not.--vue
- Force to use vue or not.--eslint
- Force to use eslint or not.--sass
- Force to use sass or not.--less
- Force to use less or not.--stylus
- Force to use stylus or not.--generate
- Force to generate missing files or not.--context
- Project root directory.--dev-server-port
--dev-server-host
--dev-server-open-browser
--production-sourcemap
--css-module
--progress
- Show progress.--config
- CLI only. Specify tyconfig file path.--define.PRE_DEFINE_VARIABLE='value'
- Predefine.
-
ESLint / Babel / PostCSS will be loaded in webpack if there are config files such as
.eslintrc.js
/babel.config.js
/postcss.config.js
in your project root directory. -
In most cases you don't need to config anything except ESLint / Babel / PostCSS.
-
TypeScript support is out of box. Just write your
tsconfig.json
in project root directory. But in electron project, you should write differenttsconfig.json
for main process and renderer process, default insrc/renderer/tsconfig.json
andsrc/main/tsconfig.json
. -
Use ESLint to check typescript code instead of TSLint.
See example folder.
- MIT