@ionic/app-scripts

Ionic Project를 위한 스크립트

설치는 이렇게

npm install @ionic/app-scripts@latest --save-dev

디폴트 설정

아래와 같은 기본설정으로 빠르게 앱을 빌드하게 해준다.

• Multi-core processing tasks in parallel for faster builds
• In-memory file transpiling and bundling
• Transpiling source code to ES5 JavaScript
• Ahead of Time (AoT) template compiling
• Just in Time (JiT) template compiling
• Template inlining for JiT builds
• Bundling modules for faster runtime execution
• Treeshaking unused components and dead-code removal
• Generating CSS from bundled component Sass files
• Autoprefixing vendor CSS prefixes
• Minifying JavaScript files
• Compressing CSS files
• Copying src static assets to www
• Linting source files
• Watching source files for live-reloading

기본설정을 통해 개발에 집중할 수 있게 해준다.

Ionic framework의 소스는 모듈로 구성되어 있고 다양한 번들러와 빌드프로세스로 패키징될 수 있다. 이 프로젝트의 목적은 ionic app을 더 쉽게 개발하게 하기 위한것이다. 

npm Scripts

외부 테스트러너에 의존하기보다 Ionic App Script는 npm script로 실행되는데 적합하다. package.json파일에 아래와 같이 기본설정이 되어 있다.

"scripts": {

    "ionic:build": "ionic-app-scripts build",

    "ionic:serve": "ionic-app-scripts serve"

  },

package.json에 기술된 build script를 실행되도록 하려면 다음과 같이 수행한다.

npm run build

Custom Configuration

개발자에게 대게는 기본설정으로 충분할것이다. 하지만 Ionic App Script는 다양한 테스크들을 설정하거나 오버라이드하는 다양한 방법을 제공한다.  Custom하지 않으면 항상 디폴트가 적용된다.

package.json Config

package.json파일을 Ionic project가 사용하는데 config 프로퍼티가 커스텀 설정을 위해 사용된다. 아래는 그 예이다.

  "config": {

    "ionic_bundler": "rollup",

    "ionic_source_map_type": "source-map",

    "ionic_cleancss": "./config/cleancss.config.js"

  },

Command-line Flags

기억해야 해! 프로젝트의 package.json파일의 scripts프로퍼티에서 ionic-app-scripts를 어떻게 실행했는지. 자 우리는 이제 각 스크립트에 command-line flag들을 추가할 수 있다. 또는 새로운 스크립트를 커스텀플래그와 함께 정의할 수 도 있지.

"scripts": {

    "build": "ionic-app-scripts build --rollup ./config/rollup.config.js",

    "minify": "ionic-app-scripts minify --cleancss ./config/cleancss.config.js",

  },

동일한 커맨드라인 플래그는 npm run에도 동일하게 적용될 수 있지

npm run build --rollup ./config/rollup.config.js

Overriding Config Files

config file	package.json config	cmd-line flag
Babili	ionic_exp_babili	--babili
CleanCss	ionic_cleancss	--cleancss or -e
Copy	ionic_copy	--copy or -y
Closure	ionic_closure	--closure or -l
Generator	ionic_generator	--generator or -g
NGC	ionic_ngc	--ngc or -n
Rollup	ionic_rollup	--rollup or -r
Sass	ionic_sass	--sass or -s
TSLint	ionic_tslint	--tslint or -i
UglifyJS	ionic_uglifyjs	--uglifyjs or -u
Watch	ionic_watch	--watch
Webpack	ionic_webpack	--webpack or -w

Overriding Config Values

config values	package.json config	cmd-line flag	defaults	details
root directory	ionic_root_dir	--rootDir	process.cwd()	The directory path of the Ionic app
src directory	ionic_src_dir	--srcDir	src	The directory holding the Ionic src code
www directory	ionic_www_dir	--wwwDir	www	The deployable directory containing everything needed to run the app
build directory	ionic_build_dir	--buildDir	build	The build process uses this directory to store generated files, etc
temp directory	ionic_tmp_dir	--tmpDir	.tmp	Temporary directory for writing files for debugging and various build tasks
node_modules directory	ionic_node_modules_dir	--nodeModulesDir	node_modules	Node modules directory
ionic-angular directory	ionic_angular_dir	--ionicAngularDir	ionic-angular	ionic-angular directory
ionic-angular entry point	ionic_angular_entry_point	--ionicAngularEntryPoint	index.js	entry point file for ionic-angular
bundler	ionic_bundler	--bundler	webpack	Chooses which bundler to use: webpack or rollup
source map type	ionic_source_map_type	--sourceMapType	source-map	Chooses the webpack devtool option. eval and source-map are supported
generate source map	ionic_generate_source_map	--generateSourceMap	true	Determines whether to generate a source map or not
tsconfig path	ionic_ts_config	--tsconfig	{{rootDir}}/tsconfig.json	absolute path to tsconfig.json
app entry point	ionic_app_entry_point	--appEntryPoint	{{srcDir}}/app/main.ts	absolute path to app's entrypoint bootstrap file
app ng module path	ionic_app_ng_module_path	--appNgModulePath	{{srcDir}}/app/app.module.ts	absolute path to app's primary NgModule
app ng module class	ionic_app_ng_module_class	--appNgModuleClass	AppModule	Exported class name for app's primary NgModule
clean before copy	ionic_clean_before_copy	--cleanBeforeCopy	false	clean out existing files before copy task runs
output js file	ionic_output_js_file_name	--outputJsFileName	main.js	name of js file generated in buildDir
output js map file	ionic_output_js_map_file_name	--outputJsMapFileName	main.js.map	name of js source map file generated in buildDir
output css file	ionic_output_css_file_name	--outputCssFileName	main.css	name of css file generated in buildDir
output css map file	ionic_output_css_map_file_name	--outputCssMapFileName	main.css.map	name of css source map file generated in buildDir
bail on lint error	ionic_bail_on_lint_error	--bailOnLintError	null	Set to true to make stand-alone lint commands fail with non-zero status code
write AoT files to disk	ionic_aot_write_to_disk	--aotWriteToDisk	null	Set to true to write files to disk for debugging
print dependency tree	ionic_print_original_dependency_tree	--printOriginalDependencyTree	null	Set to true to print out the original dependency tree calculated during the optimize step
print modified dependency tree	ionic_print_modified_dependency_tree	--printModifiedDependencyTree	null	Set to true to print out the modified dependency tree after purging unused modules
print webpack dependency tree	ionic_print_webpack_dependency_tree	--printWebpackDependencyTree	null	Set to true to print out a dependency tree after running Webpack
experimental parse deeplink config	ionic_experimental_parse_deeplinks	--experimentalParseDeepLinks	null	Set to true to parse the Ionic 3.x deep links API for lazy loading (Experimental)
experimental manual tree shaking	ionic_experimental_manual_treeshaking	--experimentalManualTreeshaking	null	Set to true to purge unused Ionic components/code (Experimental)
experimental purge decorators	ionic_experimental_purge_decorators	--experimentalPurgeDecorators	null	Set to true to purge unneeded decorators to improve tree shakeability of code (Experimental)
experimental closure compiler	ionic_use_experimental_closure	--useExperimentalClosure	null	Set to true to use closure compiler to minify the final bundle
experimental babili	ionic_use_experimental_babili	--useExperimentalBabili	null	Set to true to use babili to minify es2015 code
convert bundle to ES5	ionic_build_to_es5	--buildToEs5	true	Convert bundle to ES5 for for production deployments