4. October 2017

Webpack: How to read version from file and render it into React web

Imagine the simple scenario.The string with version is stored in the file, and it is necessary to transport it from the file into a React application using Webpack.

The solution is relatively simple.

The whole idea is to execute child process which will read the file and transfers the content via variable into the application.

You will need DefinePlugin which allows defining a custom variable and transports it into the transpiler.

Update your package.json and add there

new webpack.DefinePlugin({
   __VERSION__: JSON.stringify('1.2.3')
})

Update your compoents to render the version:

... {__VERSION__} ...

Check the application and you should see there version 1.2.3.

Let’s move further and read a value from the file version.txt. You will need child_process. Add following line to package.json:

const childProcess = require('child_process');

Now update our previous code to read the value from the file. It is necessary to wrap the output into JSON.stringify otherwise you won’t be able to render the version properly.

new webpack.DefinePlugin({
   __VERSION__: JSON.stringify(childProcess.execSync('cat version.txt').toString())
})

This command will invoke the cat command and the output of the command will be set to variable.

If you want a little bit more portable version of the script, then use ShellJS instead of a plain cat.

The code with ShellJS will look like this:

cons shell = require('shelljs');

new webpack.DefinePlugin({
   __VERSION__: JSON.stringify(shell.cat('version.txt').toString())
})

26. December 2016

How to build app with MobX annotations via webpack using Babel 6

I was searching for hints how to build games based on React. There is nice simple react-game-kit. The kit contains demo where you can as a player discover the kit itself.

Just type:

git clone git@github.com:FormidableLabs/react-game-kit.git
cd react-game-kit
npm install
npm start

Then you can open the demo in your browser: http://localhost:3000/

react-game-kit-demo

I was trying to build my own game based on code from react-game-kit. I hit one problem that webpack was not able to process MobX annotation @observable in GameStore.

Module build failed: SyntaxError: Unexpected token (4:2)

  2 | 
  3 | class GameStore {
> 4 |   @observable characterPosition = { x: 0, y: 0 };
    |   ^

The problem is described in MobX documentation. The annotation @observable is available only in ES7 which is fairly new. In case of Babel 5 or 6 you should use “Stage 0” processing.

Here is how to fix the problem:

npm install babel-plugin-transform-decorators-legacy --save-dev
npm install babel-preset-stage-0 --save-dev

The first package “transform-decorators-legacy” allows you to use decorators with Babel 6. The second package allows you to enable plugins in Stage 0 of build by Babel.

Then you need to tell webpack to use the plugin for decorators transform. Add list of plugins to query section of webpack.config.js:

...
  query: {
    presets: ['es2015', 'react'],
    plugins: ['transform-decorators-legacy', 'transform-class-properties']
  }
...

Now you can start the webpack and @observable will be processed.

If you want to learn more about MobX, there is nice tutorial at Egghead.io.