feat: migrate from Webpack to esbuild for optimized builds

- Updated build process to use esbuild, enhancing performance and reducing bundle size.
- Introduced custom esbuild plugins to replicate Webpack functionality, including removal of duplicate tslib helpers.
- Replaced the previous build script for ES5 with a new optimized version using esbuild.
- Added support for TypeScript in esbuild configuration, ensuring compatibility with existing code.
- Removed Webpack-related dependencies and configurations from package.json and renovate.json.

This transition aims to streamline the build process and improve overall efficiency.
This commit is contained in:
Daniel Sogl
2025-06-07 16:02:05 +02:00
parent 4f8f99fa44
commit f47561fd7c
10 changed files with 880 additions and 1219 deletions
+36
View File
@@ -0,0 +1,36 @@
// Custom esbuild plugins to replace webpack functionality
/**
* Plugin to remove duplicate tslib helpers that TypeScript might emit
* Works with both .js and .ts files for comprehensive coverage
*/
const removeTslibHelpersPlugin = {
name: 'remove-tslib-helpers',
setup(build) {
// Handle both JavaScript and TypeScript files
build.onLoad({ filter: /\.(js|ts)$/ }, async (args) => {
const fs = require('fs');
const path = require('path');
const contents = await fs.promises.readFile(args.path, 'utf8');
// Remove the __extends method that is added automatically by typescript
const transformedContents = contents.replace(
/var\s__extends\s=\s\(this\s&&[\sa-z\._\(\)\|{}=:\[\]&,;?]+}\)\(\);/i,
''
);
// Determine the correct loader based on file extension
const ext = path.extname(args.path);
const loader = ext === '.ts' ? 'ts' : 'js';
return {
contents: transformedContents,
loader: loader,
};
});
},
};
module.exports = {
removeTslibHelpersPlugin,
};
+61
View File
@@ -0,0 +1,61 @@
const { resolve } = require('path');
const { removeTslibHelpersPlugin } = require('./esbuild-plugins');
const ROOT = resolve(__dirname, '../../');
const DIST = resolve(ROOT, 'dist');
/**
* Base esbuild configuration for TypeScript projects
* Based on esbuild TypeScript documentation: https://esbuild.github.io/content-types/#typescript
*/
const baseConfig = {
platform: 'browser',
target: 'es2015',
format: 'iife',
bundle: true,
sourcemap: true,
treeShaking: true,
// TypeScript support - esbuild handles .ts files natively
loader: { '.ts': 'ts' },
// Resolve TypeScript and JavaScript files
resolveExtensions: ['.ts', '.js'],
// Define environment variables
define: {
'process.env.NODE_ENV': '"production"',
},
// Inject tslib helpers globally
inject: [resolve(ROOT, 'scripts/build/tslib-provider.js')],
// Custom plugins for webpack compatibility
plugins: [removeTslibHelpersPlugin],
// Path aliases for module resolution
alias: {
'@awesome-cordova-plugins/core': resolve(DIST, '@awesome-cordova-plugins/core/index.js'),
},
banner: {
js: '/* Awesome Cordova Plugins - https://github.com/danielsogl/awesome-cordova-plugins */',
},
};
/**
* Configuration for minified production bundle
*/
const minifiedConfig = {
...baseConfig,
minify: true,
outfile: resolve(DIST, 'awesome-cordova-plugins.min.js'),
};
/**
* Configuration for unminified development bundle
*/
const unminifiedConfig = {
...baseConfig,
minify: false,
outfile: resolve(DIST, 'awesome-cordova-plugins.js'),
};
module.exports = {
baseConfig,
minifiedConfig,
unminifiedConfig,
};
-2
View File
@@ -1,2 +0,0 @@
// removes the __extends method that is added automatically by typescript
module.exports = (source) => source.replace(/var\s__extends\s=\s\(this\s&&[\sa-z\._\(\)\|{}=:\[\]&,;?]+}\)\(\);/i, '');
+27
View File
@@ -0,0 +1,27 @@
// This file provides tslib helpers to esbuild, replacing webpack's ProvidePlugin
var tslib = require('tslib');
// Export all tslib helpers to global scope
global.__extends = tslib.__extends;
global.__assign = tslib.__assign;
global.__rest = tslib.__rest;
global.__decorate = tslib.__decorate;
global.__param = tslib.__param;
global.__metadata = tslib.__metadata;
global.__awaiter = tslib.__awaiter;
global.__generator = tslib.__generator;
global.__exportStar = tslib.__exportStar;
global.__values = tslib.__values;
global.__read = tslib.__read;
global.__spread = tslib.__spread;
global.__spreadArrays = tslib.__spreadArrays;
global.__spreadArray = tslib.__spreadArray;
global.__await = tslib.__await;
global.__asyncGenerator = tslib.__asyncGenerator;
global.__asyncDelegator = tslib.__asyncDelegator;
global.__asyncValues = tslib.__asyncValues;
global.__makeTemplateObject = tslib.__makeTemplateObject;
global.__importStar = tslib.__importStar;
global.__importDefault = tslib.__importDefault;
global.__classPrivateFieldGet = tslib.__classPrivateFieldGet;
global.__classPrivateFieldSet = tslib.__classPrivateFieldSet;