Question

我创建了一个基本的NPM软件包，该软件包将加载过去几年中的所有UI元素。我创建了程序包，并将其上传到NPM。但是，当我将软件包安装到另一个项目上并尝试使用按钮时，会收到错误消息：找不到模块：无法解析C：\ Users \ Scott Selke \ Documents \ Personal_projects中的'ui-library-lofidevelopment' \ test \ test \ src'

我尝试弄乱webpack，以为可能是问题所在。我还更新了所有依赖项，以确保没有中断错误。在本地设置中，我可以访问代码没问题。但是，从NPM安装时，该软件包不起作用。

我的通过npm安装的ui-library-lofidevelopment测试应用程序：

import React from 'react';
import logo from './logo.svg';
import { Button } from 'ui-library-lofidevelopment';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Button text={"fuck you this worked"} />
      </header>
    </div>
  );
}

export default App;

我的package.json文件：

{
  "name": "ui-library-lofidevelopment",
  "version": "1.0.6",
  "description": "",
  "main": "./dist/lib/index.js",
  "scripts": {
    "start": "./node_modules/.bin/parcel src/docs/index.html",
    "build": "webpack --mode=production",
    "build:docs": "./node_modules/.bin/parcel build src/docs/index.js -d dist/docs/"
  },
  "author": "Scott Selke",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.12.0",
    "parcel-bundler": "^1.12.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

我的webpack.config.js文件：


const path = require('path');
// const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: path.resolve(__dirname, 'src/lib/index.js'),
    output: {
        path: path.resolve(__dirname, './build/lib'),
        filename: 'index.js',
        library: '',
        libraryTarget: 'commonjs'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: "file-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
               test: /\.scss$/,
               use: [
                   "style-loader",
                   "css-loader",
                   "sass-loader"
               ] 
            }
        ]
    },
    resolve: {
        extensions: ['.scss', '.js', '.json', '.png', '.gif', '.jpg', '.svg'],
    },
    plugins : [
        // new HtmlWebPackPlugin({
        //     template: "./src/index.html",
        //     filename: "./index.html"
        // }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
}

我希望npm软件包可以安装并可用。但是我收到未找到错误模块。

Answer 1

好，所以我的解决方法是：

我的webpack输出设置为

output: {
        path: path.resolve(__dirname, './build/lib'),
        filename: 'index.js',
        library: '',
        libraryTarget: 'commonjs'
    },

和我在package.json中的main设置为：

"main": "./dist/lib/index.js",

因此，两个人没有排队。

自定义NPM UI库，找不到模块

1 个答案: