使用babel编译.jsx文件而不是.js

我开始学习ReactJs，我试图使用this "builder"从零开始构建环境。使用babel编译.jsx文件而不是.js

一切都运行得很好，但我想和.jsx文件，而不是.js工作（文本编辑器螺丝了，否则，和IR使用未编译脚本扩展名不同的感觉更好）

然而，我没有设法编译这样的.jsx文件，它只适用于.js文件。

这是.babelrc配置文件：

{ 
    "presets":["es2015","react"] 
}

而且我webpack.config.js：

var path = require('path'); 

var config = { 
    context: path.join(__dirname,'src'), 
    entry:[ 
     './main.js' 
    ], 
    output:{ 
     path :path.join(__dirname,'www'), 
     filename:'bundle.js' 
    }, 
    module:{ 
     loaders:[ 
      { 
       test: /\.js$/, 
       exclude:/node_modules/, 
       loaders:['babel'] 
      } 
     ], 
    }, 
    resolveLoader:{ 
     root: [ 
      path.join(__dirname,'node_modules') 
     ] 
    }, 
    resolve:{ 
     root:[ 
      path.join(__dirname,'node_modules') 
     ] 
    } 
}; 

module.exports = config;

我想简单地改变的WebPack配置文件的扩展名从js到jsx，但无济于事。任何想法？

来源

2017-01-23 Sebastianb

只需更换这行：

test: /\.js$/,

有：

test: /\.jsx$/,

它将运行在.jsx文件，而不是.js文件巴贝尔装载机。

如果你想transpile 都.js和.jsx，你可以将其设置为/\.jsx?$/，其中?在正则表达式表示匹配0或1次出现前面的字符：试验均为阳性.js和.jsx。

.test属性表示运行loader键中指定的加载程序必须满足的条件。您可以阅读有关module.loader选件here的更多信息。

此外，导入模块的时候，你应该添加.jsx扩展，像这样：

import Counter from './Counter.jsx';

或者设置的WebPack的resolve.extensions配置添加.jsx扩展（默认情况下，它仅查找.js文件）。就像这样：

resolve: { 
    /* ... */ 
    extensions: ['', '.js', '.jsx'] 
}

这样，您就可以导入你的文件不带扩展名：

import Counter from './Counter';

来源

2017-01-23 20:49:02 mrlew

改变你指出的那样，不过，当我启动服务器时，它抛出一个错误行：'ERROR在./src/main.jsx中：无法解析'file'或'directory'。/ Counter'这两个js文件（main和counter）都是.jsx文件。 – Sebastianb

@Sebastianb我编辑了一个新的信息。你可以再试一次吗？ – mrlew

是的！那就是诀窍，谢谢！ – Sebastianb

使用babel编译.jsx文件而不是.js

回答

相关问题