Wow.js与webpack的反应

Question

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

我通过npm安装它。

npm install --save wow.js

它安装得很完美。现在的问题是如何正确导入它。我不能让它继续发挥作用。

我尝试过几种方法：

第一：

import wow from 'wow.js';

但是webpack不能编译它。上面说找不到模块。即使我使用完整的url import wow from /node_modules/wow.js

第二：

我正在使用这里的这个解决方案

require('imports?this=>window!js/wow.js');

但是我仍然找不到模块(我改变了通往node_modules的路径)。

第三：

来自这里

我正在使用公开模块，并尝试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]
};

Answer 1

执行下列步骤

1. 安装exports-loader npm i exports-loader --save-dev
2. 向webpack.config.js添加此加载程序 { test: require.resolve('wow.js/dist/wow.js')，加载程序：'exports?this.WOW‘}
3. 将import添加到应用程序中 import WOW from 'wow.js/dist/wow.js';

Answer 2

替代选项，而不更新您的wepack配置。

1. 安装WOW.js：npm install wowjs
2. 导入组件：import WOW from 'wowjs';
3. 在组件的componentDidMount()下：new WOW.WOW().init(); 导入React，{ Component }从“react”；从“wowjs”导入WOW；类Cmp扩展组件{ componentDidMount() {新WOW.WOW().init()；} /* (){/*代码*/ }导出默认Cmp；

Answer 3

还可以将.call(this)更改为.call(window) (wow.js最后一行)。在这里找到了这个解决方案，https://foundation.zurb.com/forum/posts/46574-how-to-add-js-library-from-bower