Add Rollup configuration to export CommonJS and ES modules
Description
This PR introduces a Rollup configuration to build and export both CommonJS (cjs) and ES Modules (es) for the smartystreets-javascript-sdk package. The main goal is to make the library compatible with different module systems, ensuring that it can be seamlessly integrated into various JavaScript environments (Node.js, modern bundlers, and browsers).
Changes Made
Rollup Configuration:
- Added rollup.config.js to handle the bundling process for CommonJS and ES modules.
Included the following plugins for the build process:
- @rollup/plugin-commonjs: Transforms CommonJS modules to ES6, allowing bundling.
- @rollup/plugin-json: Imports JSON files as modules.
- @rollup/plugin-terser: Minifies the bundle for optimized performance.
- rollup-plugin-delete: Cleans up the dist directory before building.
New index.mjs File:
Created index.mjs to serve as the input for Rollup. This file ensures that named exports are correctly compiled for the ES module output.
Package.json Modifications:
Defined the exports field for module support:
- ES module: "./dist/esm/index.js"
- CommonJS module: "./dist/cjs/index.js"
- Updated the main entry to point to the CommonJS build.
- Updated the scripts section with the build script using Rollup.
- Added Rollup and its plugins to devDependencies.
Updated Build Process:
- The build output is now structured to generate both cjs and es formats in the dist/ directory.
- The build script compiles the source using Rollup.
Node Modules Cleanup:
- Reinstalled dependencies and cleaned up the node_modules to ensure a smooth build process.
Testing
- Verified the build process using npm run build to ensure that both CommonJS and ES module bundles are created successfully.
- Confirmed the proper handling of dependencies like axios and axios-retry as externals.
Impact
- This update ensures compatibility with modern JavaScript environments and bundlers.
- By supporting both CommonJS and ES Modules, the SDK can be easily used in Node.js, modern browsers, and build systems like Webpack or Rollup.
- Resolves issue #88 by adding support for ES modules.
Thank you for creating this PR! I'm unfamiliar with Rollup, we're ideally looking for a solution that will dynamically handle if the user is using es6 or cjs. I'm using es6 in the example repo here, and pointing to ./dist/index.es.js and not able to see the fix.
Is this something that Rollup can solve?
@maxwellpothier
Thank you for your feedback!
I've addressed the issue you mentioned by creating a new index.mjs file, which allows Rollup to properly compile named exports for ES Modules. Rollup is designed to handle both CommonJS and ES Module formats effectively, and this solution should help in the interim.
Please feel free to re-test the project now pointed to ./dist/esm/index.js to see if the fix resolves your issue.
However, a more robust long-term solution would be to migrate the codebase entirely to ES Modules. This approach is natively supported in Node.js starting from version 12, which would simplify module handling and improve compatibility across different environments.
Let me know if you have any further questions or need more clarification!
@akadoshin
Thank you for making the changes, apologies for the late response!
I ended up tweaking a few things in the process of testing on my end, and created a PR #92 that you can take a look at to make sure things look good.
As for the migration to ES Modules, that is on our list of things we'd like to prioritize for this codebase. Stay tuned for changes there soon!
Closing this PR due to duplication with: https://github.com/smarty/smartystreets-javascript-sdk/pull/92.