如何导入第三方图层滑块？

Question

我在html模板中配置了layer slider。 配置看起来像：

然后 html部分，包含滑块内容：

<section id="home" class="homeSlide">
   <div id="layerslider" style="width:2560px;height:1290px;max-width:2560px;">
        ...
   </div>
</section>

并在关闭标签之前：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="layerslider/js/greensock.js" type="text/javascript"></script>
<script src="layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#layerslider').layerSlider({
            skin: 'fullwidth'
            , skinsPath: 'layerslider/skins/'
        });
    });
</script>

所以我只想让它在react app中运行。怎么做？ jQuery库通过webpack成功导入，我尝试使用它：

app.jsx

componentDidMount() {
    let layerSlider = $.fn.layerSlider;
    $('#layerslider').layerSlider({
      skin: 'fullwidth',
      skinsPath: '../js/layerslider/skins/'         
    });

}   

在 landingPage.jsx render()方法中，我放置了重写的html标记。

结构：

node_modules
public
src
    ---client
        ---components
            app.jsx
            landingPage.jsx
            ....
        ---css
        ---js
            ---layerslider
                /css
                /js
                /skins
        ---static
           /slider
    entry.js

package.json
webpack.config.js

webpack.config.js

中的一部分

module.exports = {
    devtool: 'eval',

    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './src/client/entry', './src/client/js/layerslider/js/greensock.js', './src/client/js/layerslider/js/layerslider.transitions.js', 
        './src/client/js/layerslider/js/layerslider.kreaturamedia.jquery.js'
    ],

    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: '/public/'
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],

    resolve: {
        extensions: ['.js', '.jsx', '.scss'],
        alias: {
            jquery: path.join(__dirname, 'node_modules/jquery/src/jquery.js')
        }
    },

    devServer: {
        proxy: {
            '/api/*': 'http://localhost:3000'
        },
        contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
        compress: true, // enable gzip compression
        historyApiFallback: true, // true for index.html upon 404, object for multiple paths
        hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
        https: false, // true for self-signed, object for cert authority
        noInfo: true, // only errors & warns on hot reload
        // ...
    },

    module: {
        rules: [
            {
                test: /node_modules\/jquery\/src\/selector-sizzle\.js$/,
                loader: 'string-replace',
                query: {
                    search: '../external/sizzle/dist/sizzle',
                    replace: 'sizzle'
                }
            },
            {
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['react', 'es2015', 'stage-0']
                    }
                }
            },
            {
        test: /\.scss$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "sass-loader" // compiles Sass to CSS
        }]
      },
            {
                test: /\.(png|gif|jpg)$/,
                loader: 'url-loader',
                options: { limit: '25000' }
            }
        ]
    }
}

的LandingPage ：

render() {
    return (
    <div className="landing-page grid">

        <div id="layerslider" style={{ width: "2560px", height: "1290px", maxWidth: "2560px" }}>
            <div className="ls-slide" data-ls={"slidedelay:8000,transition2d:92,timeshift:-1000"}>
                <img src="../static/slider/slide-1.jpg" className="ls-bg" alt="Slide background" /> <img className="ls-l" style={{ top: "544px", left: "333px", whiteSpace: "nowrap" }}
                    data-ls={"offsetxin:0,offsetyin:bottom,durationin:3600,easingin:easeOutQuad,fadein:false,rotatein:-10,offsetxout:0,durationout:1500"} src="../static/slider/assets/foundation/01-foundation.png" alt="" />
            </div>
     </div>

但没有运气......错误：TypeError: $(...).layerSlider is not a function