航点 npm - 错误：无法解析“航点”

Question

我有一个 vue 项目并安装了航点

npm install waypoints

我尝试导入它

import waypoint from 'waypoints';

但得到一个错误

错误：无法解析 /Mypath 中的“航点”

我究竟做错了什么？

var webpack = require('webpack');
var path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
var WebpackNotifierPlugin = require('webpack-notifier');
var fs = require('file-system');
var CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports = {
/*node: {
  fs: "empty"
},*/
    resolve: {
    alias: {
      'masonry': 'masonry-layout',
      'isotope': 'isotope-layout'
    }
  },

    entry: './main.js',
    devtool: 'source-map',
    output: {
        path: path.resolve(__dirname, './public/assets'),
        filename: 'bundle.[chunkhash].js',
    },

    module: {
        rules: [

         {  test: /\.js$/, 
                exclude: /node_modules/, 
                loader: "babel-loader?presets[]=es2015",

             },

            {
                test:/\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [{loader:'css-loader?sourceMap'}, {loader:'sass-loader', options: {
                    sourceMap: true,

                }}],

                })
            },   



            {
                 test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },



        ]
    },  

    plugins: [
new CleanWebpackPlugin(['assets/*', 'css/*'], {
            root: '/Users/LEITH/sites/laravelleith/public',
            verbose: true,
            dry: false,
            exclude: ['360lockturret.jpg'],
            watch: true
    }),

        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin('app.[chunkhash].css'),
        new WebpackNotifierPlugin(),

        function() {
            this.plugin('done', stats =>{
                fs.writeFileSync(
                    path.join(__dirname, 'manifest.json'),
                    JSON.stringify(stats.toJson().assetsByChunkName)
                )

            });
        }

    ]

};

Answer 1

Waypoints 捆绑了多种风格，甚至通过 NPM，但我无法确定是否有默认实现。这就是为什么您的典型import Waypoint from 'waypoints'指令不起作用的原因。

我为我的“vanilla ES6 + Webpack”设置解决了这个问题，如下所示：

import 'waypoints/lib/noframework.waypoints.min.js';

const waypoint = new Waypoint({
  element: document.getElementById('myScrollTarget'),
  handler: () => {}
});