我尝试使用 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 :
我正在使用 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]
};
最佳答案
无需更新您的 wepack 配置的替代选项。
- 安装 WOW.js:
npm install wowjs
- 在您的组件中导入:
import WOW from 'wowjs';
在组件的
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;
关于javascript - Wow.js 与 webpack 和 react ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35099440/