Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update default preprocessor references from browserify to webpack #3015

Merged
merged 2 commits into from
Aug 11, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions source/_changelogs/1.1.2.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@

- {% url 'Added ESLint, Docker, and TypeScript to Plugins' plugins %}
- {% url 'Added recipe for TypeScript with Browserify' recipes %}
- {% url 'Added recipe for TypeScript with Webpack' recipes %}
- {% url 'Added recipe for TypeScript with webpack' recipes %}
- {% url 'Added recipe for Direct Controlling AngularJS' recipes %}
- {% url 'Added recipe for E2E API Testing' recipes %}
- {% url 'Added more video tutorials' tutorials %}
- {% url 'Improved displaying list of Tutorials, Recipes, Applications, and Docker examples' recipes %}

25 changes: 12 additions & 13 deletions source/api/plugins/preprocessors-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,33 @@ We've created three preprocessors as examples for you to look at. These are full

The code contains comments that explain how it utilizes the preprocessor API.

* {% url 'Browserify Preprocessor' https://github.com/cypress-io/cypress-browserify-preprocessor %}
* {% url 'webpack Preprocessor' https://github.com/cypress-io/cypress-webpack-preprocessor %}
* {% url 'Watch Preprocessor' https://github.com/cypress-io/cypress-watch-preprocessor %}
* {% url 'webpack preprocessor' https://github.com/cypress-io/cypress-webpack-preprocessor %}
* {% url 'Browserify preprocessor' https://github.com/cypress-io/cypress-browserify-preprocessor %}
* {% url 'Watch preprocessor' https://github.com/cypress-io/cypress-watch-preprocessor %}

# Defaults

By default, Cypress comes packaged with the **Browserify Preprocessor** already installed.
By default, Cypress comes packaged with the **webpack preprocessor** already installed.

The Browserify Preprocessor handles:
The webpack preprocessor handles:

- ES2015 and JSX via Babel
- TypeScript
- CoffeeScript `1.x.x`
- ES2015 via Babel
- JSX and CJSX
- Watching and caching files

The exact default configuration options {% url 'can be found here' https://github.com/cypress-io/cypress-browserify-preprocessor#browserifyoptions %}.

{% note info %}
Are you looking to change the **default options** for Browserify?
Are you looking to change the **default options** for webpack?
{% endnote %}

Changing the Browserify options lets you:
If you already use webpack in your project, you can pass in your webpack config as {% url 'shown here' https://github.com/cypress-io/cypress-webpack-preprocessor#options %}.

If you don't use webpack in your project or would like to keep the majority of the default options, you can {% url 'modify the default options' https://github.com/cypress-io/cypress-webpack-preprocessor#modifying-default-options %}. Editing the options allows you to do things like:

- Add your own Babel plugins
- Modify options for TypeScript compilation
- Add support for CoffeeScript `2.x.x`

Please read this link in the {% url 'Browserify preprocessor' https://github.com/cypress-io/cypress-browserify-preprocessor#modifying-default-options %} repo for instructions on modifying these.

# Usage

To use a preprocessor, you should bind to the `file:preprocessor` event in your {% url "`pluginsFile`" configuration#Folders-Files %}:
Expand Down
6 changes: 3 additions & 3 deletions source/faq/questions/using-cypress-faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -484,7 +484,7 @@ describe('Logo', () => {

The code you write in Cypress is executed in the browser, so you can import or require JS modules, *but* only those that work in a browser.

You can `require` or `import` them as you're accustomed to. We preprocess your spec files with `babel` and `browserify`.
You can `require` or `import` them as you're accustomed to. We preprocess your spec files with webpack and Babel.

We recommend utilizing one of the following to execute code outside of the browser. Furthermore, you can use your own Node version during code excecution by setting the {% url "`nodeVersion`" configuration#Node-version %} in your configuration.

Expand Down Expand Up @@ -545,7 +545,7 @@ Not at the moment. {% issue 587 "There is an open issue for this." %}

Yes. You can customize how specs are processed by using one of our {% url 'preprocessor plugins' plugins %} or by {% url 'writing your own custom preprocessor' preprocessors-api %}.

Typically you'd reuse your existing `babel` and `webpack` configurations.
Typically you'd reuse your existing Babel and webpack configurations.

## {% fa fa-angle-right %} How does one determine what the latest version of Cypress is?

Expand Down Expand Up @@ -628,7 +628,7 @@ Also, check out our {% url 'Stubbing `console` Receipe' recipes#Stubbing-and-spy

## {% fa fa-angle-right %} How do I use special characters with `cy.get()`?

Special characters like `/`, `.` are valid characters for ids {% url "according to the CSS spec" https://www.w3.org/TR/html50/dom.html#the-id-attribute %}.
Special characters like `/`, `.` are valid characters for ids {% url "according to the CSS spec" https://www.w3.org/TR/html50/dom.html#the-id-attribute %}.

To test elements with those characters in ids, they need to be escaped with {% url "`CSS.escape`" https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape %} or {% url "`Cypress.$.escapeSelector`" https://api.jquery.com/jQuery.escapeSelector/ %}.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -418,7 +418,7 @@ Set the {% url `watchForFileChanges` configuration#Global %} configuration prope
The `watchForFileChanges` property is only in effect when running Cypress using {% url "`cypress open`" command-line#cypress-open %}.
{% endnote %}

The component responsible for the file-watching behavior in Cypress is the {% url 'Cypress Browserify Preprocessor' https://github.com/cypress-io/cypress-browserify-preprocessor %}. This is the default file-watcher packaged with Cypress.
The component responsible for the file-watching behavior in Cypress is the {% url '`cypress-webpack-preprocessor`' https://github.com/cypress-io/cypress-webpack-preprocessor %}. This is the default file-watcher packaged with Cypress.

If you need further control of the file-watching behavior you can configure this preprocessor explicitly: it exposes options that allow you to configure behavior such as _what_ is watched and the delay before emitting an "update" event after a change.

Expand Down
7 changes: 4 additions & 3 deletions source/guides/tooling/plugins-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,15 @@ Check out our {% url 'Configuration API docs' configuration-api %} which describ

## Preprocessors

The event `file:preprocessor` is used to customize how your test code is transpiled and sent to the browser. By default Cypress handles CoffeeScript and ES6 using `babel` and then uses `browserify` to package it for the browser.
The event `file:preprocessor` is used to customize how your test code is transpiled and sent to the browser. By default, Cypress handles ES2105, TypeScript, and CoffeeScript, using webpack to package it for the browser.

You can use the `file:preprocessor` event to do things like:

- Add the latest ES* support.
- Write your test code in ClojureScript.
- Customize the `babel` settings to add your own plugins.
- Swap out `browserify` for `webpack` or anything else.
- Customize the Babel settings to add your own plugins.
- Customize the options for compiling TypeScript.
- Swap out webpack for Browserify or anything else.

Check out our {% url 'File Preprocessor API docs' preprocessors-api %} which describe how to use this event.

Expand Down