1.前言总结最近工作中在移动端实现的一个跑马灯效果，最终效果如下：印象看起来像HTML标签'跑马灯'可以直接实现这个效果，但是'marquee'标签在HTML标准中已经被废弃了。由于HTML标准已经废弃了这个标签，现在工作都是用Vue，所以想知道能不能也发布一个基于Vue的文本跑马灯。轻组件包，让别人可以通过npminstall来使用...，想想都有些激动，于是开始了我的第一次npm组件之旅！2.不好意思用npm发布一个包。我在通过npminstall...安装package包的时候，不知道package包在哪。在知乎上？折腾了好久，才知道是在npm上发布的。2.1npm发布包流程进入官网，注册账号进入编写好的组件，登录npm账号执行npmpublish，遇到的第一个问题好像就是这个。这里的注意是由于国内网络问题。很多小伙伴把npm镜像代理到淘宝或者其他地方，这里设置回原图。npmconfigsetregistry=http://registry.npmjs.org后来又遇到了这里。我也查看了ENEEDAUTH错误，但是没有看到如下提示：Youneedtoauthorizethismachineusing'npmadduser'所以这里需要npmadduser（注意发布的包名，可能有问题重名的，比如我的组件包本来叫vue-marquee，后来在npm上找到了这个包，但是他做的是Verticalmarquee，所以我改名为vue-marquee-ho，以区别组件packageishorizo??ntal.)3.基于Vue的文本跑马灯组件大致了解了如何发送组件包之后，我们来看看需要如何编写发布的组件包。3.1初始化组件我这里还是用vue-cli，虽然有很多东西我用不着，但是因为对这个比较熟悉，所以还是按照这一步来初始化组件vueinitwebpackvue-marquee-hocdvue-marquee-hocnpminstall//安装依赖包npmrundev//启动服务3.2修改配置文件先看package.json"name":"vue-marquee-ho","version":"1.2.1","description":"AVuecomponenttomarquee","author":"wangjuan","private":false,"license":"MIT","main":"dist/vue-marquee.min.js","scripts":{"dev":"nodebuild/dev-server.js","start":"nodebuild/dev-server.js","build":"nodebuild/build.js","test":"nodebuild/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"，这里的配置意思是，当别人使用这个包从'vue-marquee-ho'导入VueMarquee时；，导入的文件。可以看出这个vue-marquee-ho最后需要打包一个js文件，所以我们需要修改webpack.prod.config.js文件varwebpackConfig=merge(baseWebpackConfig,{module:{rules:utils.styleLoaders({sourceMap:config.build.productionSourceMap,extract:true})},devtool:config.build.productionSourceMap?'#source-map':false,//输出:{//路径:config.build.assetsRoot,//文件名:utils.assetsPath('js/[name].[chunkhash].js'),//chunkFilename:utils.assetsPath('js/[id].[chunkhash].js')//},输出:{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.htmlnewwebpack.DefinePlugin({'process.env':env}),newwebpack.optimize.UglifyJsPlugin({compress:{warnings:false},sourceMap:true}),//提取css到它自己的filenewExtractTextPlugin({//filename:utils.assetsPath('css/[name].[contenthash].css')filename:'vue-marquee.min.css'}),newOptimizeCSSPlugin()]})模块。exports=webpackConfig可以看到我的output输出配置改了，然后webpack.prod.config.js之前的很多不必要的代码都去掉了，再看相应的config配置，文件是config/index.htmljsbundle:{env:require('./prod.env'),assetsRoot:path.resolve(__dirname,'../dist'),assetsPublicPath:'/',assetsSubDirectory:'/',productionSourceMap:true,productionGzip:false,productionGzipExtensions:['js','css'],bundleAnalyzerReport:process.env.npm_config_report}，至此配置基本修改完毕。接下来我们看一下实现关键功能的跑马灯组件。3.3跑马灯组件思路：标签中的文字当占用的宽度超过外层div的宽度时，添加一个内容相同的标签。这里span标签设置为display:inline-block;，其宽度可以计算，span标签外的父元素设置为font-size:0;display:inline-block;,父元素的宽度为两者的宽度And，即一个span标签宽度的两倍，然后通过CSS3动画设置其父元素：@keyframesmarquee{0%{transform:翻译X(0);}100%{转换：translateX(-50%);}}可以完美实现跑马灯效果。具体代码：
