programing

vuejs 라이브러리를 가져올 수 없습니다.

prostudy 2022. 7. 3. 09:09
반응형

vuejs 라이브러리를 가져올 수 없습니다.

나는 단지 만드는 법을 배우기 위해 작은 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에 패키지를 공개하고 Impor/사용할 수 있는 툴과 설정을 제공할 수 있는 사람에게 인센티브를 수여합니다.

다음의 순서에 따릅니다.

  • 다음 사항을 확인합니다.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",
  // ...
}

패키지 사용자를 제외하고 소스(Webpack 실행)를 빌드하지 마십시오. 미리 패키지화된 javascript 파일을 지정해야 합니다.

참고로 패키지는vuejs-swing현재 npm에는 공개되지 않습니다.패키지 이름을 변경했는지 개인 저장소에서 작업했는지 모르겠습니다.

언급URL : https://stackoverflow.com/questions/47328143/unable-to-import-a-vuejs-library

반응형