总结下最近工作上在移动端实现的一个跑马灯效果，最终效果如下：
印象中好像HTML标签的‘marquee'的直接可以实现这个效果，不过 HTML标准中已经废弃了‘marquee'标签
既然HTML标准已经废弃了这个标签，现在工作上用的是Vue，所以想着能不能自己也发布一个基于Vue的文字跑马灯组件包，这样别人可以通过npm install ...就可以用，想想还有点激动，于是开始我的第一个npm组件之旅！
二、用npm发布一个包
有点惭愧，之前通过npm install ...安装package包时，我是不知道package包存在哪里，在github上？折腾一番才知道是在npm上发布的。
2.1 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的文字跑马灯组件
大致了解怎么发组件包以后，我们再来看看需要发布出去的组件包怎么写的。
3.1初始化组件
这里我还是用到vue-cli，虽然有很多东西不需要，因为对这个比较熟悉，所以还是按照这个步骤来，初始化该组件
vue init webpack vue-marquee-ho cd vue-marquee-ho cnpm install // 安装依赖包 npm run dev // 启动服务
3.2修改配置文件
首先看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: [ // 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