babel不会在父文件夹中转发jsx文件
我正在使用grunt来编译反应jsx文件,并且按照预期使用grunt-babel以及预设:[“env”,“react”],plugins:[“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
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']);};
上面的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'));
有没有办法将咕噜声或节点安装到一层以上的文件?
对于有此类问题的人来说,解决方案就是使用
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 ]