npm 建立賬號(hào)

npm建立賬號(hào)

解決思路：把這個(gè)特殊的需求功能做成屬于自己的組件昭躺，當(dāng)下次需要去使用它的時(shí)候。那么我們就可以打包這個(gè)組件并上傳到npm管理庫伪嫁，這個(gè)庫可以是自己的私有庫领炫，也可以是npmjs公共庫。

一张咳、初始化一個(gè)空項(xiàng)目

1帝洪、新建一個(gè)文件夾，然后進(jìn)入到該文件夾目錄下脚猾，執(zhí)行

npm init

初始化項(xiàng)目葱峡。然后會(huì)讓你填一些項(xiàng)目相關(guān)的信息，跟著提示填就是了龙助。沒啥說的砰奕。注意name不要和現(xiàn)有的其他npm包重名了，不然一會(huì)兒發(fā)Npm包的時(shí)候會(huì)失敗提鸟，可以先去npmjs.com搜一下有沒有重名的军援。
這一步完成后，目錄下會(huì)生成package.json文件称勋。

2胸哥、由于本教程是發(fā)布一個(gè)vue的組件包，而且使用了es6和webpack赡鲜，所以在devDependencies字段中空厌，應(yīng)該至少加入對(duì)應(yīng)的依賴庐船，可以參考我這個(gè)配置name 為npm包的名稱，一定不能跟別人的重復(fù)嘲更，可以自己去npmjs.com 上面檢查下是否重復(fù)醉鳖，否則提交不成功的
main 自己定義的程序的入口文件，比如我希望打包后是 dist/helloWorld.js哮内。private 要設(shè)置為 false

{
  "name": "hello-world",
  "description": "",
  "version": "1.0.0",
  "author": "十三月",
  "license": "MIT",
  "private": false,
  "main": "dist/helloWorld.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --inline",
    "build": "webpack --display-error-details --config webpack.config.js"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.12.0",
    "webpack-dev-server": ">=3.4.1"
  }
}

具體這些依賴都有什么用處自己查查就明白了。

3壮韭、執(zhí)行npm install北发，下載這些依賴包。
4喷屋、項(xiàng)目根目錄下創(chuàng)建2個(gè)文件夾：dist 和 src琳拨，名字按照個(gè)人習(xí)慣可以變動(dòng)。我習(xí)慣使用dist代表發(fā)布的目錄屯曹，src是開發(fā)目錄狱庇。dist文件夾里的js是到時(shí)候通過webpack打包后的文件。待會(huì)只會(huì)提交dist目錄到npm官網(wǎng)上恶耽，src不提交密任。

src里，我們創(chuàng)建一個(gè)常規(guī)的vue組件偷俭。hello-world.vue 內(nèi)容大致如下：

<template>
  <div>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
  export default {
    name: "hello-world",
    components: {},
    props: {
      name: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    mounted() {

    },
    methods: {},
    destroyed() {
    }
  }
</script>

<style scoped>

</style>

接下來我們還需要?jiǎng)?chuàng)建一個(gè)js文件浪讳。index.js 內(nèi)容如下（這里的寫法主要是把這個(gè)組件 export 出去）：

import helloWorld from './hello-world.vue'
export default helloWorld;

5、接下來配置 webpack 打包涌萤，把src中的內(nèi)容打包進(jìn) dist 目錄內(nèi)：
根目錄下新增 webpack.config.js 大致內(nèi)容如下：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),//輸出路徑淹遵，就是上步驟中新建的dist目錄
    publicPath: '/dist/',//路徑

    filename: 'helloWorld.js',//打包之后的名稱
    library: 'helloWorld', // 指定的就是你使用require時(shí)的模塊名

    libraryTarget: 'umd', // 指定輸出格式
    umdNamedDefine: true // 會(huì)對(duì) UMD 的構(gòu)建過程中的 AMD 模塊進(jìn)行命名。否則就使用匿名的 define
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

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
    })
  ])
}

然后執(zhí)行npm run build负溪，就會(huì)在dist目錄下生成helloWorld.js透揣。這個(gè)js即是我們這個(gè)npm包的主文件。

6川抡、新建一個(gè)文件辐真，名為.npmignore，是不需要發(fā)布到npm的文件和文件夾猖腕，規(guī)則和.gitignore一樣拆祈。如果你的項(xiàng)目底下有.gitignore但是沒有.npmignore，那么會(huì)使用.gitignore里面的配置倘感。大致可以參考我的.npmignore

.DS_Store
node_modules/
dist/
build/
npm-debug.log
yarn-error.log
package-lock.json

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

至此放坏，一個(gè)npm組件包就做完了，剩下的老玛，只是提交到npm官網(wǎng)去淤年。

(如果要嚴(yán)謹(jǐn)點(diǎn)钧敞，當(dāng)然還需要加入單元測試通過后再發(fā)包。麸粮。溉苛。但是。弄诲。愚战。但是。齐遵。寂玲。

image

）

二、發(fā)布到NPM上的流程

1梗摇、前提拓哟，得有個(gè)npm賬號(hào)，沒有就新注冊一個(gè)賬號(hào)
https://www.npmjs.com/signup

2伶授、進(jìn)入到項(xiàng)目的根目錄下断序，運(yùn)行 npm login 執(zhí)行登錄
一般情況下回提示你輸入 你的用戶名，密碼和郵箱糜烹，若登錄成功一般會(huì)顯示：

`Logged in as` 你的名字 `on https://registry.npmjs.org/`.

3违诗、登錄成功后就可以執(zhí)行 npm publish 即可將這個(gè)npm包發(fā)布到npm官網(wǎng)。大概過個(gè)10來分鐘就可以搜索到并下載景图，我們執(zhí)行npm install hello-world --save-dev 即可在自己的項(xiàng)目中import導(dǎo)入進(jìn)來當(dāng)做組件使用了较雕。
4、更新包的時(shí)候挚币，需要手動(dòng)修改 package.json 中的version版本號(hào)亮蒋，一般慣例都是+1，比如1.0.0 --> 1.0.1妆毕。更改完成后慎玖，分別執(zhí)行打包、登錄npm笛粘、發(fā)布即可趁怔。

npm run build

npm login
npm publ