Start using babel

Having serious thoughts about making a build folder...

babel.config.json

@@ -0,0 +1,14 @@
+{
+	"presets":[
+		[
+			"@babel/preset-env",
+			{
+				"bugfixes":true,
+				"modules":false,
+				"useBuiltIns":"usage",
+				"corejs":"3.21"
+			}
+		]
+	],
+	"targets":"defaults"
+}

gulpfile.ts

@@ -1,7 +1,13 @@
 import { watch, src, dest, series, parallel } from 'gulp'
 import { createProject } from 'gulp-typescript'
 import * as typedoc from 'gulp-typedoc'
+import * as babel from 'gulp-babel'
+import terser from 'gulp-terser'
 import { rollup } from 'rollup'
+import resolve from '@rollup/plugin-node-resolve'
+// import commonjs from '@rollup/plugin-commonjs'
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const commonjs = require('@rollup/plugin-commonjs')
 type Stream=NodeJS.ReadWriteStream
 const tsProject = createProject('tsconfig.json')
 const sourceGlob = 'src/lib/*'
@@ -20,22 +26,61 @@ export function buildEs (): Stream {
     .pipe(dest('dist/lib'))
 }
 export const buildEsAndDocs = parallel(buildEs, buildDocs)
+export function buildBabel (): Stream {
+  return src('dist/lib/*.js')
+    .pipe(babel())
+    .pipe(src('dist/lib/*.d.ts'))
+    .pipe(dest('dist/babel/'))
+}
+const umdOutput = 'dist/umd/pixelmanipulator.js'
 async function rollupToUmd (): Promise<void> {
   const bundle = await rollup({
-    input: 'dist/lib/pixelmanipulator.js'
+    input: 'dist/babel/pixelmanipulator.js',
+    external: /core-js/
   })
   await bundle.write({
-    file: 'dist/umd/pixelmanipulator.js',
+    file: umdOutput,
     format: 'umd',
     name: 'pixelmanipulator'
   })
   return await bundle.close()
 }
-function postRollup (): Stream {
-  return src('dist/lib/*.d.ts')
+const bundleOutput = 'dist/bundle/pixelmanipulator.js'
+async function rollupToBundle (): Promise<void> {
+  const bundle = await rollup({
+    input: 'dist/babel/pixelmanipulator.js',
+    plugins: [
+      resolve(),
+      commonjs()
+    ]
+  })
+  await bundle.write({
+    file: bundleOutput,
+    format: 'umd',
+    name: 'pixelmanipulator'
+  })
+  return await bundle.close()
+}
+const doRollup = parallel(rollupToUmd, rollupToBundle)
+function minifyUmd (): Stream {
+  return src(umdOutput)
+    .pipe(terser())
+    .pipe(dest('dist/umd/min'))
+}
+function minifyBundle (): Stream {
+  return src(bundleOutput)
+    .pipe(terser())
+    .pipe(dest('dist/bundle/min'))
+}
+const minify = parallel(minifyUmd, minifyBundle)
+function moveRollupTypes (): Stream {
+  return src('dist/babel/*.d.ts')
     .pipe(dest('dist/umd'))
+    .pipe(dest('dist/bundle'))
+    .pipe(dest('dist/umd/min'))
+    .pipe(dest('dist/bundle/min'))
 }
-export const buildUmd = series(buildEsAndDocs, rollupToUmd, postRollup)
+export const buildUmd = series(buildEsAndDocs, buildBabel, doRollup, minify, moveRollupTypes)
 const demoSrcGlob = 'src/demo/*.ts'
 export function demoTsc (): Stream {
   return src(demoSrcGlob)

package.json

@@ -37,8 +37,14 @@
     "canvas"
   ],
   "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
+    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "@types/gulp": "^4.0.9",
+    "@types/gulp-babel": "^6.1.30",
     "@types/gulp-sourcemaps": "^0.0.35",
+    "@types/gulp-terser": "^1.2.1",
     "@types/node": "^14",
     "@typescript-eslint/eslint-plugin": "^4.0.1",
     "@typescript-eslint/parser": "^4.0.0",
@@ -49,6 +55,8 @@
     "eslint-plugin-promise": "^4.2.1 || ^5.0.0",
     "eslint-plugin-tsdoc": "^0.2.14",
     "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-terser": "^2.1.0",
     "gulp-typedoc": "^3.0.2",
     "gulp-typescript": "^6.0.0-alpha.1",
     "rollup": "^2.67.3",
@@ -68,5 +76,8 @@
     "prebuild": "eslint .",
     "build": "gulp",
     "coverage": "exit 1"
+  },
+  "dependencies": {
+    "core-js": "^3.21.1"
   }
 }

tsconfig.json

@@ -3,12 +3,13 @@
 		"outDir":"./dist/commonjs",
 		"rootDir":".",
 		"declaration":true,
-		"target":"ES2015",
+		"target":"esnext",
 		"moduleResolution": "node",
 		"lib":[
 			"dom",
-			"es2015"
+			"esnext"
 		],
+		"allowSyntheticDefaultImports": true,
 		"allowUnreachableCode":false,
 		"allowUnusedLabels": false,
 		"noImplicitReturns": true,