无法导入vuejs库

hid*_*dar 6 node-modules ecmascript-6 webpack vue-component vuejs2

我正在制作一个小型 vuejs 库,只是为了学习如何制作一个。我们称之为 swing,这就是文件的结构。

在此输入图像描述

conf/, dist/,文件test/为空

我已将这个库推送到 github 并发布到 npm。我使用它将其安装到我的应用程序中

npm install --save vuejs-swing
Run Code Online (Sandbox Code Playgroud)

我可以看到它安装在package.jsonnode_modules文件夹中,但是当我这样做时:

import swing from 'vuejs-swing' 
Run Code Online (Sandbox Code Playgroud)

我收到此错误:

 ERROR  Failed to compile with 1 errors                                                                                11:42:41 AM

This dependency was not found:

* vuejs-swing in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/c
omponents/HelloWorld.vue

To install it, you can run: npm install --save vuejs-swing
Run Code Online (Sandbox Code Playgroud)

显然已经安装了,所以肯定是配置问题

这是我的 webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  module: {
    rules: [
      // use babel-loader for js files
      { test: /\.js$/, use: 'babel-loader' },
      // use vue-loader for .vue files
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  },
  // default for pretty much every project
  context: __dirname,
  // specify your entry/main file
  entry: {
    app: './src/swing.js',
    
  },
  output: {
    // specify your output directory...
    path: path.resolve(__dirname, 'output'),
    // and filename
    filename: 'index.min.js'
  },
  resolve: {
    // this is optional, but it lets you import .vue files without the .vue extension.
    extensions: ['.js', '.json', '.vue']
  }
}



if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}
Run Code Online (Sandbox Code Playgroud)

编辑:

我将向任何能够提供在 npm 中发布包所需的工具和配置并能够导入/使用它的人奖励。

ray*_*nco 1

按着这些次序:

  • 确保你的output文件夹没有被 git 忽略(不应该在.gitignore文件中)
  • 构建用于生产的包(运行 Webpack)
  • 在你的package.json观点中main,文件指向./output/index.min.js不是指向./src/swing.js
{
  "name": "vuejs-swing",
  "version": "0.1.2",
  "main": "./output/index.min.js",
  // ...
}
Run Code Online (Sandbox Code Playgroud)

不要让你的包的用户为你构建源代码(运行 Webpack),你需要将他们指向一个预先打包的 javascript 文件。

附带说明一下,该软件包目前vuejs-swing尚未在 npm 上公开发布。我不知道您是否更改了包名称或在私有存储库上工作。

  • 如果有 GitHub 的链接就好了 (2认同)