1

プロジェクト全体をES6からES5にコンパイルする必要があるreact-toolboxのcljsjsパッケージをアップグレードしようとしています。次のエラーが表示されます。

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';

これまでのところ、私が構築しているwebpack構成は次のようになります。

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)
        })
    ]
};
4

1 に答える 1

1

エラーはまさにそれが言うことです

export Ripple from './ripple';

有効な ES6 ではありません。それはする必要があります

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

現在のコードでは、https://babeljs.io/docs/plugins/transform-export-extensions/をロードする必要があります。

于 2017-07-25T19:01:14.300 に答える