I am using grunt to transpiling react jsx files and it's perfectly works as expected by using grunt-babel along with presets: ["env", "react"],plugins: ["transform-es2015-modules-amd"]
The problem I have is,grunt-babel transpiling JSX files which are placed in a same directory but I need to transpile JSX files which are one level up to root folder directory.Below is the detail explanation:
Folder Structure :
ReactApp
- App // grunt-babel and relevant plug-ins, presets installed here
- config
- node_modules
- JSX // it's transpiling and working
- test.jsx
- JSX_generated
- test.js
- gruntfile
- package
- JSX // jsx file source and it's not transpiling
- test.jsx
- JSX_generated // transpiled jsx file output expected
- test.js
- App.js
- index.html
gruntfile :
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
babel: {
options: {
sourceMap: false,
presets: ["env", "react"],
plugins: ["transform-es2015-modules-amd"]
},
dist: {
files: [{
expand: true,
cwd: './JSX',
src: ['*.jsx'],
dest: './JSX_generated',
ext: '.js'
}]
}
}
});
grunt.loadNpmTasks('grunt-babel');
grunt.registerTask('default', ['babel']);};
Above grunt config is woring fine for the jsx folder placed under App folder, the thing is I need to transpile the JSX folder which is placed out of App folder.
Changed grunt config cwd as cwd: './../JSX' , dest as dest: './../JSX_generated',
Getting the following error : Running "babel:jsx" (babel) task Warning: Unknown plugin "transform-es2015-modules-amd" specified in "base" at 0, attempted to resolve relative to "../JSX"
sample jsx file :
import React from 'react';
import AppData from './AppData';
import Loader from './Loader';
class Test extends React.Component {
render() {
return <p>hello </p>
}
}
ReactDOM.render(<Test />, document.getElementById('container'));
Is there a way to transpile files one level up from the grunt or node have been installed ?
For anyone having an issue like this, the solution is use
absolute paths
../Users/app/node_modules/babel-preset-es2015
or use require like below :
var babelenv = require('babel-preset-env');
var babelreact = require('babel-preset-react');
var babelamd = require('babel-plugin-transform-es2015-modules-amd');
and presets: [ babelenv, babelreact],plugins : [ babelamd ]