Question

Modal，其中一个材料-ui-next组件，未被Babel转换为ES5兼容代码。

我的.babelrc：

{
  "presets": ["es2015", "react", "stage-1", "stage-2", "stage-3"]
}

我的webpack-config.js：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, '../main/webapp/resources/js');
var APP_DIR = path.resolve(__dirname, 'src/App');

process.env.NODE_ENV = 'development';

var config = {
    entry: ['babel-polyfill', APP_DIR + '/index.jsx'],
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"development"',
        })
    ],
    module : {
        rules : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                exclude: /node_modules/,
                loader : 'babel-loader'
            }
        ]
    }
};
module.exports = config;

结果代码：output code。

material-ui-next's Modal on github

我该如何解决这个问题？

Answer 1

这是一个进口问题。我改变了这个：

import Drawer from "material-ui/es/Drawer/Drawer";

对此：

import {Drawer} from "material-ui"; 现在它工作正常。

material-ui-next的组件模型不会被Babel

1 个答案: