1 | [![build status](https://img.shields.io/travis/babel/karma-babel-preprocessor.svg)](https://travis-ci.org/babel/karma-babel-preprocessor)
|
2 | [![npm version](https://img.shields.io/npm/v/karma-babel-preprocessor.svg)](https://www.npmjs.org/package/karma-babel-preprocessor)
|
3 | [![npm downloads](https://img.shields.io/npm/dm/karma-babel-preprocessor.svg)](https://www.npmjs.org/package/karma-babel-preprocessor)
|
4 |
|
5 | # karma-babel-preprocessor
|
6 |
|
7 | > Preprocessor to compile ES6 on the fly with [babel](https://github.com/6to5/babel).
|
8 |
|
9 | **babel and karma-babel-preprocessor only convert ES6 modules to CommonJS/AMD/SystemJS/UMD. If you choose CommonJS, you still need to resolve and concatenate CommonJS modules on your own. We recommend [karma-browserify](https://github.com/Nikku/karma-browserify) + [babelify](https://github.com/babel/babelify) or [webpack](https://github.com/webpack/karma-webpack) + [babel-loader](https://github.com/babel/babel-loader) in such cases.**
|
10 |
|
11 | ## Installation
|
12 |
|
13 | With babel 7.x:
|
14 |
|
15 | ```bash
|
16 | npm install karma-babel-preprocessor@next @babel/core @babel/preset-env --save-dev
|
17 | ```
|
18 |
|
19 | With babel 6.x:
|
20 |
|
21 | ```bash
|
22 | npm install karma-babel-preprocessor babel-core babel-preset-env --save-dev
|
23 | ```
|
24 |
|
25 | As of Babel 6.0, [you need to tell Babel which features to use](http://babeljs.io/docs/plugins/). [@babel/preset-env](http://babeljs.io/docs/plugins/preset-env/) would be the most common one.
|
26 |
|
27 | ## Configuration
|
28 |
|
29 | See [babel options](https://babeljs.io/docs/usage/options) for more details.
|
30 |
|
31 | Given `options` properties are passed to babel.
|
32 |
|
33 | In addition to the `options` property, you can configure any babel options with function properties. This is useful when you want to give different babel options from file to file.
|
34 |
|
35 | For example, inline sourcemap configuration would look like the following.
|
36 |
|
37 | ```js
|
38 | module.exports = function (config) {
|
39 | config.set({
|
40 | preprocessors: {
|
41 | 'src/**/*.js': ['babel'],
|
42 | 'test/**/*.js': ['babel']
|
43 | },
|
44 | babelPreprocessor: {
|
45 | options: {
|
46 | presets: ['@babel/preset-env'],
|
47 | sourceMap: 'inline'
|
48 | },
|
49 | filename: function (file) {
|
50 | return file.originalPath.replace(/\.js$/, '.es5.js');
|
51 | },
|
52 | sourceFileName: function (file) {
|
53 | return file.originalPath;
|
54 | }
|
55 | }
|
56 | });
|
57 | };
|
58 | ```
|
59 |
|
60 | ### Don't preprocess third-party libraries
|
61 |
|
62 | Third-party libraries may not work properly if you apply `karma-babel-preprocessor` to them. It also introduces unnecessary overhead. Make sure to explicitly specify files that you want to preprocess.
|
63 |
|
64 | OK:
|
65 |
|
66 | ```js
|
67 | module.exports = function (config) {
|
68 | config.set({
|
69 | preprocessors: {
|
70 | 'src/**/*.js': ['babel'],
|
71 | 'test/**/*.js': ['babel']
|
72 | },
|
73 | // ...
|
74 | });
|
75 | };
|
76 | ```
|
77 |
|
78 | NG:
|
79 |
|
80 | ```js
|
81 | module.exports = function (config) {
|
82 | config.set({
|
83 | preprocessors: {
|
84 | './**/*.js': ['babel']
|
85 | },
|
86 | // ...
|
87 | });
|
88 | };
|
89 | ```
|
90 |
|
91 | Because it preprocesses files in `node_modules` and may break third-party libraries like jasmine #18.
|
92 |
|
93 | ### Polyfill
|
94 |
|
95 | If you need [polyfill](https://babeljs.io/docs/usage/polyfill/), make sure to include it in `files`.
|
96 |
|
97 | ```bash
|
98 | npm install @babel/polyfill --save-dev
|
99 | ```
|
100 |
|
101 | ```js
|
102 | module.exports = function (config) {
|
103 | config.set({
|
104 | files: [
|
105 | 'node_modules/@babel/polyfill/dist/polyfill.js',
|
106 | // ...
|
107 | ],
|
108 | // ...
|
109 | });
|
110 | });
|
111 | ```
|
112 |
|
113 | ### Karma's plugins option
|
114 |
|
115 | In most cases, you don't need to explicitly specify `plugins` option. By default, Karma loads all sibling NPM modules which have a name starting with karma-*. If need to do so for some reason, make sure to include `'karma-babel-preprocessor'` in it.
|
116 |
|
117 | ```js
|
118 | module.exports = function (config) {
|
119 | config.set({
|
120 | plugins: [
|
121 | 'karma-jasmine',
|
122 | 'karma-chrome-launcher',
|
123 | 'karma-babel-preprocessor'
|
124 | ],
|
125 | // ...
|
126 | });
|
127 | };
|
128 | ```
|
129 |
|
130 | ## Custom preprocessor
|
131 |
|
132 | karma-babel-preprocessor supports custom preprocessor. Set `base: 'babel'` in addition to normal preprocessor config.
|
133 |
|
134 | ```js
|
135 | module.exports = function (config) {
|
136 | config.set({
|
137 | preprocessors: {
|
138 | 'src/**/*.js': ['babelSourceMap'],
|
139 | 'test/**/*.js': ['babelSourceMap']
|
140 | },
|
141 | customPreprocessors: {
|
142 | babelSourceMap: {
|
143 | base: 'babel',
|
144 | options: {
|
145 | presets: ['@babel/preset-env'],
|
146 | sourceMap: 'inline'
|
147 | },
|
148 | filename: function (file) {
|
149 | return file.originalPath.replace(/\.js$/, '.es5.js');
|
150 | },
|
151 | sourceFileName: function (file) {
|
152 | return file.originalPath;
|
153 | }
|
154 | },
|
155 | // Other custom preprocessors...
|
156 | }
|
157 | });
|
158 | };
|
159 | ```
|