基于Vue的文字跑马灯组件(npm 组件包)

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: [
 // 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组件