ampproject / ampproject/amphtml
🔧 Improve Babel Configuration in unminified-config.js (ESM Target, loose Mode, Plugin Cleanup)
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
The Babel configuration in [build-system/babel-config/unminified-config.js](https://github.com/YOUR-REPO-NAME/blob/main/build-system/babel-config/unminified-config.js) can be optimized for better maintainability, compatibility, and performance.
Identified Issues:
1. ESM Target Configuration (targets)
• Uses browsers: ['Last 2 versions'], which may not provide optimal coverage. Suggest switching to browserslist.
2. Use of loose: true in presetEnv
• This setting can generate non-standard JavaScript, potentially causing issues in strict environments.
3. Potentially Unused Babel Plugins
• Some plugins, like babel-plugin-transform-json-configuration, may be redundant or unnecessary. A dependency audit is recommended.
4. Hardcoded JSX Pragma (Preact Dependency)
• Forces Preact.createElement, limiting compatibility with React-based builds. Making it configurable would improve flexibility.
5. Missing Validation for opt_replacePluginOverrides
• No input validation, which could lead to runtime errors if an invalid value is passed.
Suggested Fixes:
• Replace browsers: ['Last 2 versions'] with browserslist for better browser targeting.
• Remove loose: true unless strictly necessary.
• Audit and remove unused Babel plugins to reduce complexity.
• Make JSX pragma configurable instead of forcing Preact.
• Add validation for opt_replacePluginOverrides to prevent unexpected errors.
### Reproduction Steps
Reproduction Steps
1. Check Babel Configuration
• Open build-system/babel-config/unminified-config.js.
• Review the settings for targets, loose, and plugins.
2. Run the Build Process
• Execute:
amp build
• Observe the build logs for unexpected behavior.
3. Analyze Transpiled Output
• Check if loose: true produces non-standard JavaScript.
• Identify unused or redundant Babel plugins.
• Verify if JSX pragma (Preact.createElement) is enforced.
4. Test Compatibility
• Run the transpiled JavaScript in modern browsers (Chrome, Firefox, Edge).
• Check if ESM and non-ESM builds behave as expected.
5. Compare Performance & Bundle Size
• Measure the output file size.
• Identify potential performance issues from loose mode or unnecessary plugins.
6. Expected vs. Actual Behavior
• Target Browsers: Should use browserslist, but currently uses Last 2 versions.
• Loose Mode: Should be optional, but it’s enabled by default.
• Plugins: Some may be redundant or unnecessary.
• JSX Pragma: Should be configurable, but currently forces Preact.createElement.
### Relevant Logs
```shell
```
### Browser(s) Affected
_No response_
### OS(s) Affected
_No response_
### Device(s) Affected
_No response_
### AMP Version Affected
_No response_
Contributor guide
Research direction
Start with build-system/babel-config/unminified-config.js and inspect the targets, loose mode, plugins, JSX pragma, and opt_replacePluginOverrides handling. Run amp build and compare the transpiled output, compatibility, and bundle size before and after the configuration changes. Done means the configuration addresses the listed maintainability and compatibility concerns without retaining unnecessary plugins.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- build-system, tooling
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100