航点npm-错误:无法解析“航点"

问题描述

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

I have a vue project and installed waypoints

npm install waypoints

我尝试导入

import waypoint from 'waypoints';

但出现错误

错误:无法解析/Mypath中的航路点"

Error: Can't resolve 'waypoints' in /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)
                )

            });
        }

    ]

};

推荐答案

Waypoints甚至通过NPM捆绑了多种形式，但无论是否有默认实现，我都无法解决.这就是为什么您的典型import Waypoint from 'waypoints'指令不起作用的原因.

Waypoints comes bundled in several flavours, even via NPM, but I couldn't work out if there's a default implementation or not. So that's why your typical import Waypoint from 'waypoints' directive doesn't work.

我为香草ES6 + Webpack"设置解决了此问题，如下所示:

I resolved this for my "vanilla ES6 + Webpack" setup as follows:

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

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

这篇关于航点npm-错误:无法解析“航点"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！