babel-plugin-mx v1.0.0-0

mx

MX – Markup without jsX

Install

npm install mx

Webpack

First, let’s install the webpack loader for mx:

npm install mx-loader

Then in webpack.config.json add new rule for *.mx filex:

  module: {
    rules: [
+     { test: /\.mx$/, use: 'mx-loader' }
    ]
  }

Full example here.

Usage with create-react-app

First, let’s install the command-line interface for mx:

npm install mx-cli

Then in package.json, add the following lines to scripts:

   "scripts": {
+    "build-mx": "mx src/ -o src/",
+    "watch-mx": "npm run build-mx && mx src/ -o src/ --watch",
     "start": "react-scripts start",

As a final step, you may find it convenient to run watch-mx automatically with npm start, and run build-mx as a part of npm run build. You can use the && operator to execute two scripts sequentially. However, there is no cross-platform way to run two scripts in parallel, so we will install a package for this:

npm install npm-run-all

Then we can change start and build scripts to include the mx commands:

   "scripts": {
     "build-mx": "mx src/ -o src/",
     "watch-mx": "npm run build-mx && mx src/ -o src/ --watch",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-mx start-js",
+    "build": "npm run build-mx && react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

Now running npm start and npm run build also builds mx files.