javascript - babel6编译es6，export default编译完成后多出现一个default，如何解决？

问题描述

问 题

使用babel6来编译jsx文件，出现了not a function这个问题，其中，模块文件的内容如下：

export default class Test {
  test() {
    console.log("test ok!");
  }
}

主文件如下：

import React from 'react';
import Hello from './component.jsx';
import Test from './test.js';

main();

function main() {
    Test.Test();
    React.render(<Hello />, document.getElementById('app'));
}

原来是调用一个component的jsx文件作为模块，但是后来谢了test.js也出错，webpack编译可以通过，但是babel编译之后的文件中main()对应的代码为：

function main() {
    _test2.default.Test();
    _react2.default.render(_react2.default.createElement(_component2.default, null ), document.getElementById('app'));
}

这里多了一个default，不知道是为什么？我的webpack.config.js中相关的部分如下：

module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude:/node_modules/,
      loader: 'babel',
      query:
      {
        presets:['react','es2015']
      }
    }]
  }

我查看了babel升级log发现，有说对编译做改动，但是没有说export default的模块用import导入会出现这个问题，请教一下大家，有什么解决的办法吗？

解决方案

你的调用代码有点怪：

import React from 'react';
import Hello from './component.jsx';
import Test from './test.js';

main();

function main() {
    //Test导入的是一个类，怎么能直接方法调用？怎么着也得这样吧
    new Test().Test();
    React.render(<Hello />, document.getElementById('app'));
}

补充：

主类也不对，render方法不在react上，得这样：

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './component.jsx';
import Test from './test.js';

main();

function main() {
    new Test().Test();
    ReactDOM.render(<Hello />, document.getElementById('app'));
}

这篇关于javascript - babel6编译es6，export default编译完成后多出现一个default，如何解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！