babel is not transpiling parent folder react jsx files

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 ]

链接地址: http://www.djcxy.com/p/52112.html

上一篇: 以编程方式导航使用反应

下一篇: babel不会在父文件夹中转发jsx文件