Cypress preprocessor for bundling JavaScript via webpack with dependencies included and support for various ES features, TypeScript, and CoffeeScript
npm install @cypress/webpack-batteries-included-preprocessorCypress preprocessor for bundling JavaScript via Webpack, with dependencies included and support for:
- Various proposal-stage ES features
- TypeScript
- CoffeeScript
This preprocessor is a wrapper for @cypress/webpack-preprocessor. The webpack preprocessor does not include any extra dependencies (e.g. babel-loader, ts-loader), since most users will use their own webpack.config.js with it and already have the necessary dependencies installed. This preprocessor is for users who do not have those dependencies installed and would prefer not to configure the preprocessor to handle things like TypeScript and CoffeeScript.
Note that installing @cypress/webpack-preprocessor is also required. This allows you to update its version separately from this wrapper.
For webpack v5, use @cypress/webpack-batteries-included-preprocessor@3.x.x and up. For webpack v4, use @cypress/webpack-batteries-included-preprocessor@2.x.x.
``sh`
npm install --save-dev @cypress/webpack-batteries-included-preprocessor @cypress/webpack-preprocessor
In your project's cypress.config.js file:
`javascript
const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')
module.exports = (on) => {
on('file:preprocessor', webpackPreprocessor())
}
`
To enable TypeScript support, install TypeScript (if not already installed in your project npm install --save-dev typescript) and provide its location with the typescript option:
`javascript
const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')
module.exports = (on) => {
on('file:preprocessor', webpackPreprocessor({
typescript: require.resolve('typescript')
}))
}
`
As of version 4.x.x, @cypress/webpack-batteries-included-preprocessor only includes the buffer, path, process, os, and stream built-ins. If your project requires built-ins not provided, you can retrieve the preprocessor's default Webpack options and decorate them as needed.
`javascript
const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')
function getWebpackOptions () {
const options = webpackPreprocessor.getFullWebpackOptions()
// add built-ins as needed
options.resolve.fallback.zlib = require.resolve('browserify-zlib')
return options
}
module.exports = (on) => {
on('file:preprocessor', webpackPreprocessor({
webpackOptions: getWebpackOptions()
}))
}
`
Please see resolve.fallback for more information on what built-ins can be shimmed.
Other than the typescript option, this preprocessor supports the same options as @cypress/webpack-preprocessor, so see its README for more information.
If having issues with chunk load errors or bundle size problems, specifically in your end-to-end tests, please try setting DEBUG=cypress-verbose:webpack-batteries-included-preprocessor:bundle-analyzer before starting Cypress to get a webpack-bundle-analyzer report to help determine the cause of the issue. If filing an issue with Cypress, please include this report with your issue to better help us serve your issue.
Use the version of Node that matches Cypress.
Run the tests:
`shell``
yarn test
This project is licensed under the terms of the MIT license.
[semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[semantic-url]: https://github.com/semantic-release/semantic-release