无法导入 vuejs 库

Posted 2023-02-23

【中文标题】无法导入 vuejs 库

【英文标题】：Unable to import a vuejs library

【发布时间】：2018-04-29 21:38:57

【问题描述】：

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

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

我已经将此库推送到 github 并发布到 npm。 我使用

将它安装到我的应用程序中

npm install --save vuejs-swing

我可以看到它已安装在 package.json 和 node_modules 文件夹中，但是当我这样做时：

import swing from 'vuejs-swing' 

我收到此错误：

 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

显然是安装的，所以一定是配置问题

这是我的 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
    )
  ])

编辑：

我会将赏金奖励给能够提供在 npm 中发布包所需的工具、配置并能够导入/使用它的人。

【问题讨论】：

你能给我们看一下swing.vue的代码吗？我想知道您是否没有正确导出组件

@TimHutchison 我只是在导出一个简单的东西，比如export.module = 'swing'

【参考方案1】：

按照以下步骤操作：

确保您的 output 文件夹不会被 git 忽略（不应在 .gitignore 文件中） 为生产构建你的包（运行 Webpack） 在您的package.json 中将main 文件指向./output/index.min.js 和

NOT

指向./src/swing.js

  "name": "vuejs-swing",
  "version": "0.1.2",
  "main": "./output/index.min.js",
  // ...

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

顺便说一句，包vuejs-swing 目前还没有公开在 npm 上发布。我不知道您是否更改了包名称或在私有存储库上工作。

【讨论】：

这并没有解决问题。我只更正了 package.json，因为其他都还可以。 （输出不是 gitignored 并且我的库是另一个名称而不是 swing）所以，唯一要添加的是 "main": "./output/index.min.js", 输出文件夹和它的 js 文件生成。我提交的更改增加了版本并将其重新发布到 npm。即使错误在import swing from 'vuejs-swing' 之后消失了，但swing 没有定义。我将它添加到components: swing，但什么也没有。

如果有 GitHub 的链接会很高兴