Version: 2.3.0

Using Babel

Preface#

From Mocks Server v2.2.0 it is possible to use Babel compiler when loading mocks and routes files. This means that Mocks Server is able to load JavaScript files using new syntax and even TypeScript files.

Babel Configuration#

Use the low level configuration option babelRegister to enable Babel compilation in the mocks.config.js file:

module.exports = {
options: {
mock: "base",
},
// low level config
babelRegister: true,
};

Note that enabling Babel only enables Babel registration, but its configuration still depends on you. Babel will read the babel.config.js file from your project's directory, and Babel presets and other dependencies should be installed by yourself, for example:

Basic example#

Install @babel/preset-env:

npm i --save-dev @babel/preset-env

And create a babel.config.js file in the project's root folder:

module.exports = {
presets: ["@babel/env"],
};

Now, you can create files with extensions supported by default by @babel/register: .es6, .es, .jsx, .mjs and .js, and use syntax supported by @babel/preset-env.

project-root/
โ”œโ”€โ”€ mocks/
โ”‚ โ”œโ”€โ”€ routes/
โ”‚ โ”‚ โ”œโ”€โ”€ middlewares.es
โ”‚ โ”‚ โ””โ”€โ”€ users.es
โ”‚ โ””โ”€โ”€ mocks.es
โ””โ”€โ”€ mocks.config.js
caution

If you import any file located outside of the mocks folder, Babel will not compile it. Read bellow to know how to configure Babel to process extra folders.

Advanced configuration#

Use the low level configuration option babelRegisterOptions to configure @babel/register, which is used under the hood to compile files. All properties in this option are passed to Babel as options, so you can refer to its documentation, but here are some examples that might be useful.

Custom file extensions#

You can define your own supported file extensions, for example. When custom extensions are defined, Mocks Server will also try to load all files with those extensions in the mocks/routes folder, and will support defining the mocks.js file using any of those extensions also. It will always support .js and .json extensions as well (but Babel will only compile files with extensions from this option).

module.exports = {
options: {
mock: "base",
},
// low level config
babelRegister: true,
babelRegisterOptions: {
extensions: [".ts"]
}
};

Compile files from other folders#

By default, Mocks Server configures Babel to compile only files inside the mocks folder, and this may be a problem if you are importing external files from your routes or mocks definitions. In that case, you can use the only option to include another folders:

module.exports = {
options: {
mock: "base",
},
// low level config
babelRegister: true,
babelRegisterOptions: {
only: (filePath) => {
return filePath.includes("/mocks/") || filePath.includes("/my-folder-to-include/");
}
}
};

TypeScript example#

Here is an example of how to configure Babel to compile TypeScript files in the mocks folder.

Enable the babelRegister option in the mocks-server.config.js file:

module.exports = {
options: {
mock: "base",
},
// low level config
babelRegister: true,
};

Install @babel/preset-env and @babel/preset-typescript.

npm i --save-dev @babel/preset-env @babel/preset-typescript

Create a babel.config.js file in the project's root folder:

module.exports = {
presets: ["@babel/env", "@babel/preset-typescript"],
};

You don't need to specify .ts extensions in the babel advanced configuration, because Mocks Server adds it by default when enabling babelRegister.

That's all, now you can use .ts files in the mocks folder:

project-root/
โ”œโ”€โ”€ mocks/
โ”‚ โ”œโ”€โ”€ routes/
โ”‚ โ”‚ โ”œโ”€โ”€ middlewares.ts
โ”‚ โ”‚ โ””โ”€โ”€ users.ts
โ”‚ โ””โ”€โ”€ mocks.ts
โ””โ”€โ”€ mocks.config.js