grunt-babel 没有转译父文件夹反应 jsx 文件

Question

我正在使用 grunt 来转译 react jsx 文件，通过使用 grunt-babel 和预设，它完全可以按预期工作：["env"、"react"]、插件：["transform-es2015-modules-amd"]

我遇到的问题是，grunt-babel transpiling JSX files which are placed in a same directory 但我需要transpile JSX files that are one level up to root folder directory.Below 是详细解释：

文件夹结构：

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

咕噜文件：

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']);};

上面的 grunt 配置对于 App 文件夹下的 jsx 文件夹工作正常，问题是我需要转译 App 文件夹外的 JSX 文件夹。

将 grunt 配置 cwd 更改为 cwd: './../JSX' ，将 dest 更改为 dest: './../JSX_generated',

出现以下错误：运行 "babel:jsx" (babel) 任务警告：未知插件 "transform-es2015-modules-amd" 在 "base" 中指定为 0，试图相对于“../JSX”

进行解析

示例 jsx 文件：

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'));

是否有一种方法可以从已安装的 grunt 或节点转译上一级文件？

Answer 1

对于遇到此类问题的任何人，解决方案是使用

 absolute paths
../Users/app/node_modules/babel-preset-es2015

或使用如下要求：

var babelenv = require('babel-preset-env');
var babelreact = require('babel-preset-react');
var babelamd = require('babel-plugin-transform-es2015-modules-amd');

和presets: [ babelenv, babelreact],plugins : [ babelamd ]

grunt-babel 没有转译父文件夹反应 jsx 文件

grunt-babel is not transpiling parent folder react jsx files

reactjs

grunt-babel