Question

我使用webpack并在这个项目中做出反应，我想在我的项目中导入react-paginator，但是当我捆绑前端代码时出现错误。

我猜webpack没有解析node_modules文件夹下的jsx代码，但我不知道如何解决......

错误：

ERROR in ./~/react-paginator/index.js
Module parse failed: /home/kang/Desktop/doing/match-platform/node_modules/react-paginator/index.js Line 109: Unexpected token <
You may need an appropriate loader to handle this file type.

webpack config：

var webpack = require('webpack');

module.exports = {
    entry: {
        root: './src/front_end/scripts/root_container.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets:['es2015', 'react']
            }
        }, {
            test: /\.json$/,
            loader: 'json'
        }]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        path: './src/front_end/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'root.jQuery': 'jquery',
            'Promise': 'exports?global.Promise!es6-promise',
            'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch',
        }),
        new webpack.DefinePlugin({
            "require.specified": "require.resolve"
        }),
    ]
};

Answer 1

问题是 react-paginator 的源代码尚未预编译为开箱即用的格式。它仍然包含JSX。这就是代码失败的原因。

要解决此问题，您必须自己编译代码。您可以尝试将这样的include添加到jsx加载器定义中：

include: path.join(__dirname, 'node_modules/react-paginator')

这应该有助于webpack为你编译文件。

在相关的说明中，我开发了一个您可以研究的替代组件。见react-pagify。它应该没有任何摆弄你的工作。但是，设计使用它会更复杂。

Webpack意外的令牌＆lt;

1 个答案: