Webpack 将ES6编译为ES5时出现意外标记,什么';发生什么事了?

Webpack 将ES6编译为ES5时出现意外标记,什么';发生什么事了?,webpack,ecmascript-6,react-toolbox,Webpack,Ecmascript 6,React Toolbox,我正在尝试升级包,因为它需要将整个项目从ES6编译到ES5。我得到了这个错误: Hash: b375d2042d9b41b2ee59 Version: webpack 2.7.0 Time: 95ms Asset Size Chunks Chunk Names react-toolbox.inc.js 27.7 kB 0 [emitted] main + 1 hidden modules ERROR in

我正在尝试升级包,因为它需要将整个项目从ES6编译到ES5。我得到了这个错误:

Hash: b375d2042d9b41b2ee59
Version: webpack 2.7.0
Time: 95ms
               Asset     Size  Chunks             Chunk Names
react-toolbox.inc.js  27.7 kB       0  [emitted]  main
    + 1 hidden modules

ERROR in ./packages/react-toolbox/src/components/index.js
Module parse failed: /Users/pupeno/.boot/cache/tmp/Users/pupeno/Documents/code/clojure/packages/react-toolbox/ah7/x50qw4/react-toolbox-react-toolbox-2.0.0-beta.12/packages/react-toolbox/src/components/index.js Unexpected token (24:7)
You may need an appropriate loader to handle this file type.
| export { default as ProgressBar } from './progress_bar';
| export * from './radio';
| export Ripple from './ripple';
| export { default as Slider } from './slider';
| export { default as Snackbar } from './snackbar';
涟漪似乎是令人不快的象征。知道发生了什么事吗

完整文件包含:

import './utils/polyfills'; // Import polyfills for IE11

export { overrideComponentTypeChecker } from './utils/is-component-of-type';
export { default as AppBar } from './app_bar';
export { default as Autocomplete } from './autocomplete';
export { default as Avatar } from './avatar';
export * from './button';
export * from './card';
export { default as Chip } from './chip';
export { default as Checkbox } from './checkbox';
export { default as DatePicker } from './date_picker';
export { default as Dialog } from './dialog';
export { default as Drawer } from './drawer';
export { default as Dropdown } from './dropdown';
export { default as FontIcon } from './font_icon';
export { default as Input } from './input';
export * from './layout';
export { default as Link } from './link';
export * from './list';
export * from './menu';
export { default as Navigation } from './navigation';
export { default as ProgressBar } from './progress_bar';
export * from './radio';
export Ripple from './ripple';
export { default as Slider } from './slider';
export { default as Snackbar } from './snackbar';
export { default as Switch } from './switch';
export * from './table';
export * from './tabs';
export Tooltip from './tooltip';
export { default as TimePicker } from './time_picker';
到目前为止,我正在构建的网页配置如下所示:

const pkg = require('./package');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const entryName = "react-toolbox.inc";

const extractCss = new ExtractTextPlugin({ filename: entryName + '.css', allChunks: true });

module.exports = {
    target: 'web',
    context: __dirname,
    entry: path.join(__dirname, "packages", "react-toolbox", "src", "components", "index.js"),
    externals: {
        "react": "React",
        "react-dom": "ReactDOM",
        "react-addons-css-transition-group": "React.addons.CSSTransitionGroup"
    },
    output: {
        path: __dirname,
        filename: entryName + '.js',
        libraryTarget: 'var',
        library: 'ReactToolbox'
    },
    resolve: {
        extensions: ['.js', '.css', '.json'],
        modules: ['node_modules']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                include: [
                    path.join(__dirname, './components'),
                    path.join(__dirname, './spec')
                ]
            }, {
                test: /\.css$/,
                include: [
                    path.join(__dirname, './components'),
                    path.join(__dirname, './spec'),
                        /node_modules/
                ],
                use: extractCss.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            query: {
                                modules: true,
                                localIdentName: '[name]__[local]___[hash:base64:5]',
                                sourceMap: true
                            },
                        },
                        'postcss-loader'
                    ]})
            }
        ]
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {
                context: __dirname,
                postcss: function () {
                    return [
                        require('postcss-import')({
                            root: __dirname,
                            path: [path.join(__dirname, './components')]
                        }),
                        require('postcss-mixins')(),
                        require('postcss-each')(),
                        require('postcss-cssnext')(),
                        require('postcss-reporter')({
                            clearMessages: true
                        })
                    ];
                }
            }
        }),
        extractCss,
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production'),
            VERSION: JSON.stringify(pkg.version)
        })
    ]
};

错误正是它所说的

export Ripple from './ripple';
不是有效的ES6。这是必须的

export {default as Ripple} from './ripple';

您当前的代码需要加载。

如何将该插件加载到Web包中?您需要安装它并将其添加到您的Babel配置中。那么它应该如何在CI上工作?这种类型的东西不应该在web包或repo中的其他文件中指定吗?我不知道你为什么想知道CI。如果您配置Babel,该配置将像其他配置一样成为代码repo的一部分。网上有很多文档,包括我链接的页面,解释了如何启用Babel插件。考虑到您的问题从未询问过Babel,特别是关于ES6,似乎更改导出格式更符合您的要求?我这样问是因为我所有的Babel设置都在webpack.config中,文档不清楚.bable文件是放在我的主目录还是其他地方。我在网上找不到有关此插件和网页包的更多信息。更改导出格式是什么意思?我正试图编译成ES5。