What is @cypress/browserify-preprocessor?
@cypress/browserify-preprocessor is a Cypress plugin that allows you to use Browserify to bundle your test files. This is particularly useful for transforming and bundling JavaScript files using various Browserify plugins and transforms before they are executed in the Cypress test runner.
What are @cypress/browserify-preprocessor's main functionalities?
Custom Browserify Options
This feature allows you to customize the Browserify options, such as enabling Babel transformations. The code sample demonstrates how to modify the default options to enable Babel transformations by setting `babelrc` to true.
const browserify = require('@cypress/browserify-preprocessor');
module.exports = (on) => {
const options = browserify.defaultOptions;
options.browserifyOptions.transform[1][1].babelrc = true;
on('file:preprocessor', browserify(options));
};
Adding Custom Transforms
This feature allows you to add custom transforms to the Browserify bundling process. The code sample shows how to add the `envify` transform to the Browserify options.
const browserify = require('@cypress/browserify-preprocessor');
module.exports = (on) => {
const options = browserify.defaultOptions;
options.browserifyOptions.transform.push(['envify', { global: true }]);
on('file:preprocessor', browserify(options));
};
Using TypeScript with Browserify
This feature allows you to use TypeScript with Browserify by adding the `tsify` plugin and including `.ts` file extensions. The code sample demonstrates how to configure Browserify to handle TypeScript files.
const browserify = require('@cypress/browserify-preprocessor');
module.exports = (on) => {
const options = browserify.defaultOptions;
options.browserifyOptions.extensions.push('.ts');
options.browserifyOptions.plugin.unshift(['tsify']);
on('file:preprocessor', browserify(options));
};
Other packages similar to @cypress/browserify-preprocessor
cypress-rollup-preprocessor
The `cypress-rollup-preprocessor` package enables you to use Rollup to bundle your Cypress test files. Like `@cypress/browserify-preprocessor`, it allows for custom transformations and plugins, but it uses Rollup as the bundler. Rollup is known for its efficient tree-shaking capabilities, which can result in smaller bundle sizes.
cypress-esbuild-preprocessor
The `cypress-esbuild-preprocessor` package allows you to use esbuild to bundle your Cypress test files. Esbuild is known for its speed and efficiency, making it a good alternative to Browserify for faster build times. This package provides similar functionality but leverages the performance benefits of esbuild.
Cypress Browserify Preprocessor
Cypress preprocessor for bundling JavaScript via browserify.
This is the default preprocessor that comes packaged with Cypress. You'd typically need to install this if you want to modify the default options we've configured.
Modifying the default options allows you to add support for things like:
- TypeScript
- Babel Plugins
- ES Presets
Installation
Requires Node version 6.5.0 or above.
npm install --save-dev @cypress/browserify-preprocessor
Usage
In your project's plugins file:
const browserify = require('@cypress/browserify-preprocessor')
module.exports = (on) => {
on('file:preprocessor', browserify())
}
Options
Pass in options as the second argument to browserify
:
module.exports = (on) => {
const options = {
}
on('file:preprocessor', browserify(options))
}
browserifyOptions
Object of options passed to browserify.
browserify({
browserifyOptions: {
extensions: ['.js', '.ts'],
plugin: [
['tsify']
]
}
})
If you pass one of the top-level options in (extensions
, transform
, etc), it will override the default. In the above example, browserify will process .js
and .ts
files, but not .jsx
, .coffee
, or .cjsx
. If you wish to add to or modify existing options, read about modifying the default options.
watchify is automatically configured as a plugin (as needed), so it's not necessary to manually specify it.
Default:
{
extensions: ['.js', '.jsx', '.coffee', '.cjsx'],
transform: [
[
'cjsxify',
{}
],
[
'babelify',
{
ast: false,
babelrc: false,
plugins: ['babel-plugin-add-module-exports'],
presets: ['babel-preset-env', 'babel-preset-react']
},
]
],
plugin: [],
cache: {},
packageCache: {}
}
Note: cache
and packageCache
are always set to {}
and cannot be overridden. Otherwise, file watching would not function correctly.
watchifyOptions
Object of options passed to watchify
browserify({
watchifyOptions: {
delay: 500
}
})
Default:
{
ignoreWatch: [
'**/.git/**',
'**/.nyc_output/**',
'**/.sass-cache/**',
'**/bower_components/**',
'**/coverage/**',
'**/node_modules/**'
],
}
onBundle
A function that is called with the browserify bundle. This allows you to specify external files and plugins. See the browserify docs for methods available.
browserify({
onBundle (bundle) {
bundle.external('react')
bundle.plugin('some-plugin')
}
})
Default: undefined
Modifying default options
The default options are provided as browserify.defaultOptions
so they can be more easily modified.
If, for example, you want to update the options for the babelify
transform to turn on babelrc
loading, you could do the following:
const browserify = require('@cypress/browserify-preprocessor')
module.exports = (on) => {
const options = browserify.defaultOptions
options.browserifyOptions.transform[1][1].babelrc = true
on('file:preprocessor', browserify(options))
}
Contributing
Run all tests once:
npm test
Run tests in watch mode:
npm run test-watch
License
This project is licensed under the terms of the MIT license.