Wow.js与webpack并做出反应

Question

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

我通过npm安装它.

npm install --save wow.js

它完美安装.现在的问题是如何正确导入它.我不能让它工作继续未定义.

我尝试过几点:

第一:

import wow from 'wow.js';

但是webpack无法编译它.它说无法找到该模块.即使我使用完整的网址import wow from /node_modules/wow.js

---

第二:

我在这里使用这个解决方案:

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

但我仍然找不到模块(我改变了我的node_modules的路径).

---

第三:

从这里:

我正在使用expose模块并试着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

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

1. 安装WOW.js: npm install wowjs
2. 在组件中导入: import WOW from 'wowjs';

3. 在componentDidMount()您的组件下:new WOW.WOW().init();

   import React, {Component} from 'react';
   import WOW from 'wowjs';
   
   class Cmp extends Component {
     componentDidMount() {
       new WOW.WOW().init();
     }
   
     render() {
       /* code */
     }
   }
   
   export default Cmp;
   

Answer 2

执行以下步骤

1. 安装 exports-loader

   npm i exports-loader --save-dev

2. 添加webpack.config.js到此加载程序

   {
      test: require.resolve('wow.js/dist/wow.js'), 
      loader: 'exports?this.WOW'
   }
   

3. 添加import到您的应用

   import WOW from 'wow.js/dist/wow.js';