React Loader问题取决于目录?

时间:2017-05-15 17:45:20

标签: reactjs webpack

我一直在玩https://www.npmjs.com/package/react-calendar-timeline,我有一个问题。

如果我想重载时间轴类,我只需要

import React from 'react'
import Timeline from 'react-calendar-timeline';
export class MyTimeline extends Timeline {
     //Here I can override methods
}
export default MyTimeline;

这会编译并正常工作。

但是,如果我想制作import语句:

import Timeline from 'react-calendar-timeline/src/lib/Timeline';

(我最终还要更新... / lib / Item / item.js文件,因此需要继承timeline.js和/lib/items/items.js以确保加载我的重写item.js文件而不是该分支的文件。)

我遇到了加载程序问题,并且不太明白为什么。

Module parse failed: PATH\node_modules\react-calendar-timeline\src\lib\Timeline.js Unexpected token (36:19)
You may need an appropriate loader to handle this file type.
| 
| export default class ReactCalendarTimeline extends Component {
|   static propTypes = {

我不明白这个错误,因为如果我从node_modules里面的react-calendar-timeline / src / lib目录中获取所有东西,并将它直接放入我的项目中,我现在可以从Timeline.js文件继承(我知道将目录从节点模块中移出并进入我的项目是不好的做法。

那么为什么webpack能够在我的实际项目目录而不是node_modules中编译相同的代码?

我当前的webpack.config

loaders: [
    {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            presets: ['es2015', 'react'],
            plugins: ['transform-class-properties']
        }
    },
    { test: /\.css$/, loader: 'style-loader!css-loader' },
    { test: /\.scss$/, loader: 'style-loader!css-loader' },
]

1 个答案:

答案 0 :(得分:0)

您需要允许babel使用babel-plugin-transform-class-properties插件转换类属性。链接:https://babeljs.io/docs/plugins/transform-class-properties/