2

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

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

文件夹结构：

反应应用

     - 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”中指定的未知插件“transform-es2015-modules-amd”在 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 或 node 安装上一层转换文件？

4

1 回答 1

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 ]

于 2018-02-23T07:04:55.430 回答