摘要：所以我把這個為了區分這個組件包是水平方向的，改名為三基于的文字跑馬燈組件大致了解怎么發組件包以后，我們再來看看需要發布出去的組件包怎么寫的。

總結下最近工作上在移動端實現的一個跑馬燈效果，最終效果如下：

印象中好像HTML標簽的‘marquee’的直接可以實現這個效果，不過 HTML標準中已經廢棄了‘marquee’標簽
既然HTML標準已經廢棄了這個標簽，現在工作上用的是Vue，所以想著能不能自己也發布一個基于Vue的文字跑馬燈組件包，這樣別人可以通過npm install ...就可以用，想想還有點激動，于是開始我的第一個npm組件之旅！

有點慚愧，之前通過npm install ...安裝package包時，我是不知道package包存在哪里，在github上？折騰一番才知道是在npm上發布的。

進入官網，注冊帳號

進入已經寫好的組件, 登錄npm帳號

執行npm publish，最先遇到問題好像是這個

這里注意的是因為國內網絡問題，許多小伙伴把npm的鏡像代理到淘寶或者別的地方了，這里要設置回原來的鏡像。npm config set registry=http://registry.npmjs.org

后面又遇到

這里我還特意查了下ENEEDAUTH錯誤，可是卻沒看后面的提示：You need to authorize this machine using "npm adduser"
所以這里需要npm adduser

(發布的包的名字也要注意，有可能會有重名問題，像我這個組件包本來取名為vue-marquee，后面在npm上搜到已經有這個包了，不過他做的是垂直方向的跑馬燈。所以我把這個為了區分這個組件包是水平方向的，改名為vue-marquee-ho)

大致了解怎么發組件包以后，我們再來看看需要發布出去的組件包怎么寫的。

這里我還是用到vue-cli，雖然有很多東西不需要，因為對這個比較熟悉，所以還是按照這個步驟來，初始化該組件

vue init webpack vue-marquee-ho
cd vue-marquee-ho
cnpm install // 安裝依賴包
npm run dev // 啟動服務

首先看package.json

  "name": "vue-marquee-ho",
  "version": "1.2.1",
  "description": "A Vue component to marquee",
  "author": "wangjuan",
  "private": false,
  "license": "MIT",
  "main": "dist/vue-marquee.min.js",
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "test": "node build/test.js"
  },
  "dependencies": {
    "vue": "^2.2.6"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/wj704/vue-marquee-ho.git"
  },

因為這個組件包是能公用的，所以"private": false,
然后 "main": "dist/vue-marquee.min.js", 這里的配置意思是，別人用這個包 import VueMarquee from "vue-marquee-ho"; 時，引入的文件。
可以看出，這個vue-marquee-ho最終需要打包出一個js文件，所以我們需要修改webpack.prod.config.js文件

var webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  devtool: config.build.productionSourceMap ? "#source-map" : false,
  // output: {
  //   path: config.build.assetsRoot,
  //   filename: utils.assetsPath("js/[name].[chunkhash].js"),
  //   chunkFilename: utils.assetsPath("js/[id].[chunkhash].js")
  // },
   output: {
    path: config.bundle.assetsRoot,
    publicPath: config.bundle.assetsPublicPath,
    filename: "vue-marquee.min.js",
    library: "VueMarquee",
    libraryTarget: "umd"
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      "process.env": env
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      // filename: utils.assetsPath("css/[name].[contenthash].css")
       filename: "vue-marquee.min.css"
    }),
    new OptimizeCSSPlugin()
  ]
})
module.exports = webpackConfig

可以看到我的output輸出配置改了下，然后有很多webpack.prod.config.js之前不需要的代碼去掉了，再看下對應的config配置，文件是config/index.js

bundle: {
    env: require("./prod.env"),
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsPublicPath: "/",
    assetsSubDirectory: "/",
    productionSourceMap: true,
    productionGzip: false,
    productionGzipExtensions: ["js", "css"],
    bundleAnalyzerReport: process.env.npm_config_report
  },

至此配置差不多修改好了。接下來我們看看實現關鍵功能的Marquee組件

思路：標簽里的文字所占的寬度超過外面的div寬度時，增加一個內容相同的標簽。這里span標簽設置為display: inline-block;，可以計算其寬度，把span標簽外面的父元素設置為font-size: 0;display: inline-block;，父級元素的寬度即為兩者寬度之和，也就是一個span標簽寬度的兩倍，然后將其父級元素通過CSS3動畫設置：

@keyframes marquee {
    0%  { transform: translateX(0); }
    100% { transform: translateX(-50%);}
}

即可完美實現跑馬燈效果。
具體代碼：

js:

css:

我們知道 webpack.base.conf.js 中入口文件默認指定為：

entry: {
    app: "./src/main.js"
  },

所以，我們只需要將main.js引入Marquee.vue組件就可以。有兩種方式引入：

import VueMarquee from "./Marquee.vue"
export default VueMarquee;

// var VueMarquee = require("./Marquee.vue");
// module.exports = VueMarquee

注意import 和module.exports不要一起用，github看到其他人提交的組件是這兩個一起用的，這樣在windows下會報錯，好像mac不會有問題。

通過npm run build 即可看到目錄下生成了dist文件，dist文件里有四個文件，分別是：

vue-marquee.min.js
vue-marquee.min.js.map
vue-marquee.min.css
vue-marquee.min.css.map

我們知道有一個這樣的文件.gitignore，里面包含npm install時，不會安裝的東西，因為這里要用到dist文件，于是我把.gitignore 里的dist/去掉了。

.DS_Store
node_modules/

npm-debug.log*
yarn-debug.log*
yarn-error.log*

打包好了后，通過npm publish 提交到npm上

需要多次提交時注意修改package.json中的"version": "1.2.1", 我這里已經提交了21次了（捂臉哭(┬＿┬)）

通過npm install vue-marquee-ho -s 安裝到相應的項目下，安裝成功如下圖所示：

到項目中的node_modules/目錄下將可以看到：

需要用到該組件時可以這樣引入（注意引入樣式）

import VueMarquee from "vue-marquee-ho";
import Css from "vue-marquee-ho/dist/vue-marquee.min.css"
export default {
  name: "app",
  components:{
      "vue-marquee": VueMarquee
    },
}

看一個demo:

效果：

總算發布出去，能正常使用了！花了挺多時間的，雖然這個組件思路比較簡單，但是說不定別人能用上呢。這個組件的雛形代碼比現在多，不過之前在項目中直接引用也能正常使用。但是把他打包發布出去再使用的過程，出了很多問題，反復修改代碼，精簡代碼，最終終于成功了！21次的提交記錄，不容易呀，源代碼地址：

vue-marquee-ho

希望能得到大家的star ^_^

參考資料：
1、http://www.jianshu.com/p/36d3...
2、http://www.cnblogs.com/maryme...
3、http://blog.csdn.net/gamesdev...
4、https://segmentfault.com/a/11...
5、https://stackoverflow.com/que...
6、http://www.mamicode.com/info-...
7、http://blog.csdn.net/crper/ar... （雖然調試技巧我還是沒學會(????)）
8、https://github.com/xiaokaike/...
9、https://github.com/li-xianfen...