我尝试使用react和webpack来实现wow.js。

我通过npm安装它。
npm install --save wow.js
它安装完美。现在的问题是如何正确导入它。我无法使其工作保持不确定状态。

我尝试了几种方法:

第一的:

import wow from 'wow.js';

但是webpack无法编译它。它说找不到模块。即使我使用完整的URL import wow from /node_modules/wow.js
第二:

我正在使用here的解决方案:
require('imports?this=>window!js/wow.js');

但是我仍然找不到模块(我将路径更改为node_modules)。

第三:

here:

我正在使用暴露模块,并尝试new WOW().init();它说Wow is undefined

我没有使用他的第一个解决方案,因为我希望我的html看起来很简单,只有bundle.js脚本。

我找不到其他解决方案。我应该怎么做才能使其正常工作?

谢谢!

我的webpack.config.js:
module.exports = {
    entry: [
        'webpack-dev-server/client?http://localhost:8080',
        'bootstrap-loader',
        'webpack/hot/only-dev-server',
        './src/js/index.js'
    ],
    output: {
        path: __dirname + "/build",
        publicPath: "/build/",
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'react-hot!babel'
            },
            {
                test: /\.css$/,
                loader: 'style!css!postcss'
            },
            {
                test: /\.scss$/,
                loader: 'style!css!postcss!sass'
            },
            { test: /\.(woff2?|ttf|eot|svg|otf)$/, loader: 'url?limit=10000' },
            {
              test: 'path/to/your/module/wow.min.js',
              loader: "expose?WOW"
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './'
    },
    postcss: [autoprefixer]
};

最佳答案

执行以下步骤

  • 安装 exports-loader
    npm i exports-loader --save-dev
  • 添加到webpack.config.js此装载程序
    {
       test: require.resolve('wow.js/dist/wow.js'),
       loader: 'exports?this.WOW'
    }
    
  • import添加到您的应用
    import WOW from 'wow.js/dist/wow.js';
  • 关于javascript - Wow.js与webpack和 react ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35099440/

    10-11 13:11