我创建了自己的 npm 包并发布它，但是当我尝试使用它时，它给了我一个错误

Question

我创建了 reactjs 组件并使其在 npm 上发布。 我将其安装在我的另一个项目中，现在当我尝试导入它时，它给出了完整的路径，例如

import RippleIcon from '../node_modules/rippleicon/src/RippleIcon';

它给了我一个错误

./node_modules/rippleicon/src/RippleIcon.js
Module parse failed: Unexpected token (10:8)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|         <i className={this.props.icon+" RippleIcon"}/>
|     );
|   }

Rippleicon是我的npm包名称，我在create-react-app上创建我的包。 欢迎任何建议。谢谢。

这是我的包.json

{
 "name": "packagetesting",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
   "react": "^16.3.2",
   "react-dom": "^16.3.2",
   "react-scripts": "1.1.4",
   "rippleicon": "^0.1.1"
},
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}
}

Answer 1

创建节点包并将其链接到项目相对容易。假设mypackage和myproject将在同一路径上，请尝试以下步骤：

1.- 包装

$ mkdir mypackage
$ cd mypackage/
$ npm init -y
$ echo "exports.myfunc = function() { console.log("Hello"); }" > index.js
$ cd ..

其package.json内容将是：

{
  "name": "mypackage",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2.- 项目

$ mkdir myproject
$ cd myproject/
$ npm init -y
$ npm install "file:../mypackage" --save
$ echo "var mp = require('mypackage'); mp.myfunc();" > index.js
$ node index.js

您将看到打印了"Hello"。其package.json内容将是：

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mypackage": "file:../mypackage"
  }
}