3分鐘搞定NPM模塊開發

3分鐘搞定NPM模塊開發

建立組建

新建目錄

localhost:Desktop yuechunli$ pwd
/Users/liyuechun/Desktop
localhost:Desktop yuechunli$ mkdir liyc_hello
localhost:Desktop yuechunli$ cd liyc_hello/

初始化

localhost:liyc_hello yuechunli$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (liyc_hello) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/liyuechun/Desktop/liyc_hello/package.json:

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


Is this ok? (yes) 
localhost:liyc_hello yuechunli$

建立index.js

function print_liyc_hello(name) {
        console.log(name);
}

exports.print_liyc_hello = print_liyc_hello;

新建測試文件test.js

var fn = require('./index.js');

fn.print_liyc_hello('你們好，我是春哥，個人電話是13331184066');

執行test

localhost:liyc_hello yuechunli$ pwd
/Users/liyuechun/Desktop/liyc_hello
localhost:liyc_hello yuechunli$ ls
index.js    package.json    test.js
localhost:liyc_hello yuechunli$ node test
你們好，我是春哥，個人電話是13331184066
localhost:liyc_hello yuechunli$

發佈到NPM

去官網註冊一個本身的開發帳號

到https://www.npmjs.com註冊帳號,記住本身的帳號，密碼，郵箱。

命令行鏈接NPM

localhost:liyc_hello yuechunli$ npm adduser
Username: liyuechun
Password: 
Email: (this IS public) liyuechun2009@163.com
Logged in as liyuechun on https://registry.npmjs.org/.
localhost:liyc_hello yuechunli$ npm whoami
liyuechun
localhost:liyc_hello yuechunli$

發佈

localhost:liyc_hello yuechunli$ npm publish
+ liyc_hello@1.0.0
localhost:liyc_hello yuechunli$

使用

建立React 項目

localhost:Desktop yuechunli$ mkdir liycDemo
localhost:Desktop yuechunli$ cd liycDemo/
localhost:liycDemo yuechunli$ create-react-app testApp
Creating a new React app in /Users/liyuechun/Desktop/liycDemo/testApp.

Installing packages. This might take a couple minutes.
Installing react-scripts...

npm WARN prefer global marked@0.3.6 should be installed with -g

> fsevents@1.0.17 install /Users/liyuechun/Desktop/liycDemo/testApp/node_modules/fsevents
> node-pre-gyp install --fallback-to-build

[fsevents] Success: "/Users/liyuechun/Desktop/liycDemo/testApp/node_modules/fsevents/lib/binding/Release/node-v51-darwin-x64/fse.node" is installed via remote
testApp@0.1.0 /Users/liyuechun/Desktop/liycDemo/testApp
└─┬ react-scripts@0.9.2 
  ├─┬ autoprefixer@6.7.2 
  │ ├─┬ browserslist@1.7.5 
  │ │ └── electron-to-chromium@1.2.4 
  │ ├── caniuse-db@1.0.30000628 
  │ ├── normalize-range@0.1.2 
  │ ├── num2fraction@1.2.2 
  │ ├─┬ postcss@5.2.15 
  │ │ └── js-base64@2.1.9 
  │ └── postcss-value-parser@3.3.0 
Success! Created testApp at /Users/liyuechun/Desktop/liycDemo/testApp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd testApp
  npm start

Happy hacking!

項目結構圖

安裝 liyc_hello

localhost:liycDemo yuechunli$ ls
testApp
localhost:liycDemo yuechunli$ cd testApp/
localhost:testApp yuechunli$ atom ./
localhost:testApp yuechunli$ npm install --save liyc_hello
testApp@0.1.0 /Users/liyuechun/Desktop/liycDemo/testApp
└── liyc_hello@1.0.0 

localhost:testApp yuechunli$

安裝後package.json內容變化

聯繫我

微信&微信: 13331184066