Skip to content

Instantly share code, notes, and snippets.

@vadimpopa
Last active February 21, 2019 09:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vadimpopa/612974bc0cf7f5bca64670afae247aca to your computer and use it in GitHub Desktop.
Save vadimpopa/612974bc0cf7f5bca64670afae247aca to your computer and use it in GitHub Desktop.
How to concat files with CMD then transpile and minify with BabelJs
// Bellow instructions how to run a build with BabelJs. After following them, just run in CLI: `sencha app build` or `npm run build`
// 1. In app.json
"production": {
"output": {
"framework": {
"enable":true //This enables split mode, app code will be splitted in 2 files: app.js and framework.js
}
}
},
"output": {
"js": {
"version": "ES8"
}
},
"language": {
"js": {
"input": "ES8"
}
}
//2. In build.xml
<target name="-before-init-local">
<stopwatch name="timer1"/>
</target>
<target name="-after-init-local">
<property name="build.concat.options">
-strip-comments
-remove-text-references
</property>
</target>
<!--<target name="-before-init">-->
<!--<property name="build.operations">-->
<!--exclude-->
<!-- -namespace=Ext.data.flash-->
<!--</property>-->
<!--</target>-->
<target name="-before-js">
<if>
<x-is-true value="${enable.split.mode}"/>
<then><!-- set property first to override value used in compile-js -->
<property name="app.output.framework.include"
value="package-sencha-core,framework,toolkit,package-core,overrides"/>
<property name="build.compression" value=""/>
</then>
</if>
</target>
<target name="-after-js">
<if>
<equals arg1="production" arg2="${build.environment}"/>
<then>
<copy file="${build.framework.file}" tofile="${build.framework.file}.src.js" overwrite="true"/>
<copy file="${build.classes.file}" tofile="${build.classes.file}.src.js" overwrite="true"/>
</then>
</if>
</target>
<target name="-after-build">
<if>
<equals arg1="production" arg2="${build.environment}"/>
<then>
<condition property="npx" value="npx" else="npx.cmd">
<os family="unix"/>
</condition>
<x-echo message="Remove IE code from ${build.framework.file}.src.js"/>
<copy file="${build.framework.file}.src.js" tofile="${build.framework.file}.ie.src.js" overwrite="true"/>
<exec executable="node">
<arg value="./node_modules/jscodeshift/bin/jscodeshift.sh"/>
<arg value="-t"/>
<arg value="${app.dir}/transforms/transform.js"/>
<arg value="--run-in-band"/>
<arg value="${build.framework.file}.src.js"/>
</exec>
<x-echo message="Done-Remove IE code from ${build.framework.file}.src.js"/>
<parallel>
<sequential>
<x-echo message="Babelifing Framework"/>
<exec executable="${npx}">
<arg value="babel"/>
<arg value="${build.framework.file}.src.js"/>
<arg value="--out-file"/>
<arg value="${build.framework.file}"/>
<arg value="--source-maps"/>
</exec>
<x-echo message="Done-Babelifing Framework"/>
</sequential>
<sequential>
<x-echo message="Babelifing App"/>
<exec executable="${npx}">
<arg value="babel"/>
<arg value="${build.classes.file}.src.js"/>
<arg value="--out-file"/>
<arg value="${build.classes.file}"/>
<!--<arg value="&#45;&#45;source-maps"/>-->
</exec>
<x-echo message="Done-Babelifing App"/>
</sequential>
</parallel>
</then>
</if>
<stopwatch name="timer1" action="total"/>
<x-echo message="Total time: ${timer1}"/>
</target>
// 3. package.json
"scripts": {
"build": "sencha app build"
},
"babel": {
"sourceType": "script",
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"last 2 Chrome versions",
"last 2 Edge versions",
"last 2 Safari versions",
"last 2 Firefox versions"
]
},
"debug": true
}
],
"minify"
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment