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

【问题标题】：grunt-babel is not transpiling parent folder react jsx filesgrunt-babel 没有转译父文件夹反应 jsx 文件
【发布时间】：2018-07-07 04:18:17
【问题描述】：

我正在使用 grunt 来编译 react jsx 文件，通过使用 grunt-babel 和预设：[“env”，“react”]，插件：[“transform-es2015-modules-amd”]，它可以完美地工作

我遇到的问题是，grunt-babel 转译 JSX 文件，这些文件放在同一目录中，但我需要转译 JSX 文件，这些文件是根文件夹目录的上一级。下面是详细说明：

文件夹结构：

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 config cwd 更改为 cwd: './../JSX' ，dest 为 dest: './../JSX_generated',

得到以下错误：运行“babel:jsx”（babel）任务警告：“base”中为 0 指定的未知插件“transform-es2015-modules-amd”，试图相对于“../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 或已安装节点向上转换文件？

【问题讨论】：

如果我在我的预设中使用绝对路径（如预设），它可以工作：['../app/node_modules/babel-preset-es2015', './app/node_modules/babel-preset-react' ]，插件：["../app/node_modules/babel-plugin-transform-es2015-modules-amd"]

标签： reactjs grunt-babel

【解决方案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 ]

【讨论】：