摘要：所以我把這個(gè)為了區(qū)分這個(gè)組件包是水平方向的，改名為三基于的文字跑馬燈組件大致了解怎么發(fā)組件包以后，我們?cè)賮?lái)看看需要發(fā)布出去的組件包怎么寫(xiě)的。

總結(jié)下最近工作上在移動(dòng)端實(shí)現(xiàn)的一個(gè)跑馬燈效果，最終效果如下：

印象中好像HTML標(biāo)簽的‘marquee’的直接可以實(shí)現(xiàn)這個(gè)效果，不過(guò) HTML標(biāo)準(zhǔn)中已經(jīng)廢棄了‘marquee’標(biāo)簽
既然HTML標(biāo)準(zhǔn)已經(jīng)廢棄了這個(gè)標(biāo)簽，現(xiàn)在工作上用的是Vue，所以想著能不能自己也發(fā)布一個(gè)基于Vue的文字跑馬燈組件包，這樣別人可以通過(guò)npm install ...就可以用，想想還有點(diǎn)激動(dòng)，于是開(kāi)始我的第一個(gè)npm組件之旅！

有點(diǎn)慚愧，之前通過(guò)npm install ...安裝package包時(shí)，我是不知道package包存在哪里，在github上？折騰一番才知道是在npm上發(fā)布的。

進(jìn)入官網(wǎng)，注冊(cè)帳號(hào)

進(jìn)入已經(jīng)寫(xiě)好的組件, 登錄npm帳號(hào)

執(zhí)行npm publish，最先遇到問(wèn)題好像是這個(gè)

這里注意的是因?yàn)閲?guó)內(nèi)網(wǎng)絡(luò)問(wèn)題，許多小伙伴把npm的鏡像代理到淘寶或者別的地方了，這里要設(shè)置回原來(lái)的鏡像。npm config set registry=http://registry.npmjs.org

后面又遇到

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

(發(fā)布的包的名字也要注意，有可能會(huì)有重名問(wèn)題，像我這個(gè)組件包本來(lái)取名為vue-marquee，后面在npm上搜到已經(jīng)有這個(gè)包了，不過(guò)他做的是垂直方向的跑馬燈。所以我把這個(gè)為了區(qū)分這個(gè)組件包是水平方向的，改名為vue-marquee-ho)

大致了解怎么發(fā)組件包以后，我們?cè)賮?lái)看看需要發(fā)布出去的組件包怎么寫(xiě)的。

這里我還是用到vue-cli，雖然有很多東西不需要，因?yàn)閷?duì)這個(gè)比較熟悉，所以還是按照這個(gè)步驟來(lái)，初始化該組件

vue init webpack vue-marquee-ho
cd vue-marquee-ho
cnpm install // 安裝依賴包
npm run dev // 啟動(dòng)服務(wù)

首先看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"
  },

因?yàn)檫@個(gè)組件包是能公用的，所以"private": false,
然后 "main": "dist/vue-marquee.min.js", 這里的配置意思是，別人用這個(gè)包 import VueMarquee from "vue-marquee-ho"; 時(shí)，引入的文件。
可以看出，這個(gè)vue-marquee-ho最終需要打包出一個(gè)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之前不需要的代碼去掉了，再看下對(duì)應(yīng)的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
  },

至此配置差不多修改好了。接下來(lái)我們看看實(shí)現(xiàn)關(guān)鍵功能的Marquee組件

思路：標(biāo)簽里的文字所占的寬度超過(guò)外面的div寬度時(shí)，增加一個(gè)內(nèi)容相同的標(biāo)簽。這里span標(biāo)簽設(shè)置為display: inline-block;，可以計(jì)算其寬度，把span標(biāo)簽外面的父元素設(shè)置為font-size: 0;display: inline-block;，父級(jí)元素的寬度即為兩者寬度之和，也就是一個(gè)span標(biāo)簽寬度的兩倍，然后將其父級(jí)元素通過(guò)CSS3動(dòng)畫(huà)設(shè)置：

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

即可完美實(shí)現(xiàn)跑馬燈效果。
具體代碼：

js:

css:

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

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看到其他人提交的組件是這兩個(gè)一起用的，這樣在windows下會(huì)報(bào)錯(cuò)，好像mac不會(huì)有問(wèn)題。

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

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

我們知道有一個(gè)這樣的文件.gitignore，里面包含npm install時(shí)，不會(huì)安裝的東西，因?yàn)檫@里要用到dist文件，于是我把.gitignore 里的dist/去掉了。

.DS_Store
node_modules/

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

打包好了后，通過(guò)npm publish 提交到npm上

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

通過(guò)npm install vue-marquee-ho -s 安裝到相應(yīng)的項(xiàng)目下，安裝成功如下圖所示：

到項(xiàng)目中的node_modules/目錄下將可以看到：

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

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
    },
}

看一個(gè)demo:

效果：

總算發(fā)布出去，能正常使用了！花了挺多時(shí)間的，雖然這個(gè)組件思路比較簡(jiǎn)單，但是說(shuō)不定別人能用上呢。這個(gè)組件的雛形代碼比現(xiàn)在多，不過(guò)之前在項(xiàng)目中直接引用也能正常使用。但是把他打包發(fā)布出去再使用的過(guò)程，出了很多問(wèn)題，反復(fù)修改代碼，精簡(jiǎn)代碼，最終終于成功了！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... （雖然調(diào)試技巧我還是沒(méi)學(xué)會(huì)(????)）
8、https://github.com/xiaokaike/...
9、https://github.com/li-xianfen...