# @cypress/browserify-preprocessor

> Cypress preprocessor for bundling JavaScript via browserify

Latest version **3.0.2** (published 2021-11-04) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @cypress/browserify-preprocessor
pnpm add @cypress/browserify-preprocessor
yarn add @cypress/browserify-preprocessor
bun add @cypress/browserify-preprocessor
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2021-11-04 |
| First published | 2017-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 18 |
| Unpacked size | 19.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Chris Breiding |
| Maintainers | cypress-npm-publisher |
| Keywords | cypress, browserify, cypress-plugin, cypress-preprocessor |

## Links

- npm: https://www.npmjs.com/package/@cypress/browserify-preprocessor
- Repository: https://github.com/cypress-io/cypress-browserify-preprocessor
- Homepage: https://github.com/cypress-io/cypress-browserify-preprocessor#readme
- Issues: https://github.com/cypress-io/cypress-browserify-preprocessor/issues
- npm.io page: https://npm.io/package/@cypress/browserify-preprocessor

## Dependencies (18)

- [debug](https://npm.io/package/debug.md) ^4.3.2
- [babelify](https://npm.io/package/babelify.md) ^10.0.0
- [bluebird](https://npm.io/package/bluebird.md) ^3.7.2
- [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.0
- [through2](https://npm.io/package/through2.md) ^2.0.0
- [watchify](https://npm.io/package/watchify.md) ^4.0.0
- [coffeeify](https://npm.io/package/coffeeify.md) ^3.0.1
- [browserify](https://npm.io/package/browserify.md) ^16.2.3
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.16.0
- [coffeescript](https://npm.io/package/coffeescript.md) ^1.12.7
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.16.0
- [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.16.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.16.0
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.16.0
- [babel-plugin-add-module-exports](https://npm.io/package/babel-plugin-add-module-exports.md) ^1.0.4
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.16.0
- [@babel/plugin-proposal-object-rest-spread](https://npm.io/package/@babel/plugin-proposal-object-rest-spread.md) ^7.16.0

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 3.0.2 (latest) — 2021-11-04
- 3.0.1 — 2020-07-14
- 3.0.0 — 2020-05-21
- 2.2.4 — 2020-05-11
- 2.2.3 — 2020-05-08
- 2.2.2 — 2020-04-23
- 2.2.1 — 2020-04-04
- 2.2.0 — 2020-04-03
- 2.1.4 — 2020-02-11
- 2.1.3 — 2020-02-05
- 2.1.2 — 2020-02-05
- 2.1.1 — 2019-06-07
- 2.1.0 — 2019-05-20
- 2.0.0 — 2019-02-14
- 1.1.2 — 2018-09-25
- … 7 more at https://npm.io/package/@cypress/browserify-preprocessor/versions

## README

# Cypress Browserify Preprocessor [![CircleCI](https://circleci.com/gh/cypress-io/cypress-browserify-preprocessor/tree/master.svg?style=svg)](https://circleci.com/gh/cypress-io/cypress-browserify-preprocessor/tree/master)

Cypress preprocessor for bundling JavaScript via browserify.

Modifying the default options allows you to add support for things like:

- TypeScript
- Babel Plugins
- ES Presets

## Installation

Requires [Node](https://nodejs.org/en/) version 6.5.0 or above.

```sh
npm install --save-dev @cypress/browserify-preprocessor
```

## Usage

In your project's [plugins file](https://on.cypress.io/plugins-guide):

```javascript
const browserify = require('@cypress/browserify-preprocessor')

module.exports = (on) => {
  on('file:preprocessor', browserify())
}
```

## Options

Pass in options as the second argument to `browserify`:

```javascript
module.exports = (on) => {
  const options = {
    // options here
  }

  on('file:preprocessor', browserify(options))
}
```

### browserifyOptions

Object of options passed to [browserify](https://github.com/browserify/browserify#browserifyfiles--opts).

```javascript
// example
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` or `.coffee`. If you wish to add to or modify existing options, read about [modifying the default options](#modifying-default-options).

[watchify](https://github.com/browserify/watchify) is automatically configured as a plugin (as needed), so it's not necessary to manually specify it.

Source maps are always enabled unless explicitly disabled by specifying `debug: false`.

**Default**:

```javascript
{
  extensions: ['.js', '.jsx', '.coffee'],
  transform: [
    [
      'coffeeify',
      {}
    ],
    [
      'babelify',
      {
        ast: false,
        babelrc: false,
        plugins: [
          '@babel/plugin-transform-modules-commonjs', 
          '@babel/plugin-proposal-class-properties',
          '@babel/plugin-proposal-object-rest-spread',
          '@babel/plugin-transform-runtime',
          ],
        presets: [
          '@babel/preset-env',
          '@babel/preset-react',
        ]
      },
    ]
  ],
  debug: true,
  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](https://github.com/browserify/watchify#options)

```javascript
// example
browserify({
  watchifyOptions: {
    delay: 500
  }
})
```

**Default**:

```javascript
{
  ignoreWatch: [
    '**/.git/**',
    '**/.nyc_output/**',
    '**/.sass-cache/**',
    '**/bower_components/**',
    '**/coverage/**',
    '**/node_modules/**'
  ],
}
```

### onBundle

A function that is called with the [browserify instance](https://github.com/browserify/browserify#browserifyfiles--opts). This allows you to specify external files and plugins. See the [browserify docs](https://github.com/browserify/browserify#baddfile-opts) for methods available.

```javascript
// example
browserify({
  onBundle (bundle) {
    bundle.external('react')
    bundle.plugin('some-plugin')
    bundle.ignore('pg-native')
  }
})
```

### typescript

When the path to the TypeScript package is given, Cypress will automatically transpile `.ts` spec, plugin, support files. Note that this **DOES NOT** check types.

```javascript
browserify({
  typescript: require.resolve('typescript')
})
```

**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:

```javascript
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))
}
```

## Debugging

Execute code with `DEBUG=cypress:browserify` environment variable.

## Contributing

Run all tests once:

```shell
npm test
```

Run tests in watch mode:

```shell
npm run test-watch
```

## License

This project is licensed under the terms of the [MIT license](/LICENSE.md).

---
_Source: https://npm.io/package/@cypress/browserify-preprocessor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._