npm 釋出外掛

新建資料夾

npmGitLearn

npm init 

輸入相關引數 name:釋出的名稱, version：版本號 ,entry：入口檔案（我的是index.js） 等等

npm adduser 

在package.json中加入

"devDependencies": {
"babel-cli": "^6.0.0",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-plugin-istanbul": "^2.0.1",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1"
 }

基於react，babel用於將es6轉成es5（因為之前用的roadhog，roadhog 不會對node_modules 下的js進行轉換）

MyNpmDemo檔案內容

import React from "react";

export default function MyNpmDemo(){
    return <div>
        你好，我是外掛來的
    </div>
}

入口檔案 index.js 檔案

import MyNpmDemo from 'MyNpmDemo.jsx';
module.exports={
    MyNpmDemo
}

.babelrc (babel配置)

{
  "presets": ['react', 'es2015'],
  "plugins": ['transform-react-jsx']
}

把es6轉為es5

在package.json中加入

"build": "babel src --out-dir lib"

執行npm run build

將src目錄下的檔案輸出到lib目錄下

npm publish

在需要的專案中引入 package.json中加入

 " npmgitlearn": "^1.0.0"

npm install

在需要的地方引入

這裡注意路徑，如果直接引入不了，就按照外掛包檔案目錄路徑加進來

import {MyNpmDemo} from 'npmgitlearn';

<MyNpmDemo/>