Wow.js 与 webpack 和 react

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

无需更新您的 wepack 配置的替代选项。

1. 安装 WOW.js： npm install wowjs
2. 在您的组件中import WOW from 'wowjs'; ： 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';

Answer 3

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