使用webpack开发npm插件

时间: 2018-04-04阅读: 1758标签: npm

webpack

解析js文件,无法解析的文件需要借助loader


安装

cnpm i webpack --save-dev//最新版本
cnpm i webpack@3.0.0 --save-dev//3.0.0版本
cnpm i webpack@^3.0.0 --save-dev//3.0.0以上4.0.0以下版本


基础插件

  • html-webpack-plugin用于生成页面(适合多页面)
  • extract-text-webpack-plugin 抽取文本
  • UglifyjsPlugin/new webpack.optimize.UglifyJsPlugin()合并压缩js
  • CommonsChunkPlugin/new webpack.optimize.CommonsChunkPlugin()抽取公共模块(适合多页面)
  • clean-webpack-plugin打包前清除文件
  • copy-webpack-plugin文件复制


常用loader

  • 解析css文件 css-loader
  • 解析sass、less、scss、stylus文件 sass-loader/less-loader/node-loader
  • 解析图片(png、jpg、svg、gif) file-loader/url-loader
  • 给css添加前缀 postcss-loader autoprefixer


ES6插件

  • “babel-core”
  • “babel-loader”
  • “babel-preset-env”

.babelrc 文件:

{
  "presets": ["env"]
}


npm插件发布(vue&webpack&单页面)

  1. npm init =>package.json
  2. 创建.vue文件 =>插件界面及功能
  3. index.js =>入口文件
  4. webpack打包 =>webpack.config.js
  5. 测试=>this.$tips.show();
  6. npm发布=>npm adduser npm publish 
  7. npm更新=>修改 package.json中的版本号,然后npm publish

关键index.js

import TipsComponent from './vue-tips.vue'

let Tips={}
//必须install
Tips.install=function(Vue,options){
  var opt={}
  for(let key in options){
    opt[key]=options[key]
  }
  Vue.prototype.$tips=function(option){

    if(typeof option=='object'){
      for(let key in option){
        opt[key]=option[key]
      }
    }

    //extand继承,实例
    const TipsController=Vue.extend(TipsComponent)
    //mount挂载,得到新实例
    var instance=new TipsController().$mount(document.createElement("div"))

    document.body.appendChild(instance.$el)
  }
  Vue.prototype.$tips['show']=function(option){
    Vue.prototype.$tips(option);
  }
}

if(window.Vue){
  Vue.use(Tips)
}

export default Tips

webpack.config.js

var path=require('path')

module.exports={
  entry:'./src/lib/index.js',
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'vue-tips.js'
    libraryTarget:'umd',//输出规范,amd\cmd\commonjs
    library:'VueTips'//输出
  },
  module:{
    rules:[
      {
        test:/\.vue$/,
        loader:'vue-loader',
        options:{
          loaders:{
            scss:'style-loader!css-loader!sass-loader'
          }
        }
      },
      {
        test:/\.js$/,
        loader:'babel-loader',
        include:path.join(__dirname,'src'),
        exclude:/node_modules/
      }
    ]
  },
  plugins:[
  ]
}


调试心得(vue相关)

1.v-for与数组:增加:push();修改 splice(index,1,val);删除splice(index,1) 
2.v-if与关闭功能:

//v-for循环时,选中的当前列(要删除的)不渲染
v-if="currentIndex!=index"
//点击删除
@click="currentIndex=index"


多页面构建

webpack.config.js

var path=require('path')
var htmlWebpackPlugin=require('html-webpack-plugin')
var CleanWebpackPlugin =require('clean-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var webpack=require('webpack')
module.exports={
  entry:{
    vendor:['jquery','./src/js/common.js'],
    index:'./src/js/index.js',
    cart:'./src/js/cart.js'
  },
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'js/[name].js',
    publicPath:''
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        include:path.join(__dirname,'src'),
        exclude:/node_modules/,
        loader:'babel-loader'
      },
      {
        test: /\.css$/,
        include:path.join(__dirname,'src'),
        exclude:/node_modules/,
        //抽取css文件生成单独的文件,调用
        /*use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })*/
        loader:'style-loader!css-loader'//将css直接插入到html文件,嵌入文本
      }
    ]
  },
  plugins:[
    //每次webpack时先清除dist
    new CleanWebpackPlugin(['./dist'],{
      root:path.join(__dirname,''),
      exclude:/node_modules/,
      verbose:true,
      dry:false
    }),
    //抽取公共模块,index、cart、vendor都包含common
    new webpack.optimize.CommonsChunkPlugin({
      name:'vendor',
      chunks:['index','cart','vendor'],
      mikChunks:3
    }),
    //压缩js
    new webpack.optimize.UglifyJsPlugin({
      compress:{
        warnings:true//注释不压缩掉
      }
    }),
    //HTML页面生成,多个
    new HtmlWebpackPlugin({
      filename:'index.html',
      template:'./src/index.html',
      chunks:['index','vendor'],//引用的js
      //压缩,注释空格
      minify:{
        removeComments:true,
        collapseWhitespace:true
      }
    }),
    new HtmlWebpackPlugin({
      filename:'cart.html',
      template:'./src/cart.html',
      chunks:['cart','vendor'],
      minify:{
        removeComments:true,
        collapseWhitespace:true
      }
    }),
    //抽取文本
    new ExtractTextPlugin('css/base.css'),
    //全局配置jquery
    new webpack.ProvidePlugin({
      $:'jquery',
      jQuery:'jquery',
      'window.jQuery':'jquery'
    })
  ],
  //devtool:'#source-map'
}
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/590

关闭

node安装好了npm怎么没有反应?

windows安装完nodejs后做了相关环境变量配置后,cmd输入npm没反应就光标一直闪node是正常的。下面我们就来看一下出现这种情况的可能原因与解决方法。node安装好了npm没有反应的原因与解决方法如下:

NPM 机制

使用NPM安装的时候会经常出现包冲突(比如多个主模块的子模块版本不一致等),导致在开发过程中会遇到各种或大或小的问题。所有在这会介绍以下内容:NPM 主要安装方式,NPM 包信息查询

npm换源成淘宝镜像

由于node下载第三方依赖包是从国外服务器下载,虽然没有被墙,但是下载的速度是非常的缓慢且有可能会出现异常。所以为了提高效率,我们还是把npm的镜像源替换成淘宝的镜像源

npm view命令

npm view输出,如果仅输出单个版本的单个字符串字段,则不会对它进行着色或加引号,从而可以将输出传递给另一个命令。如果该字段是一个对象,则将其作为JavaScript对象文字输出。

npm世界上最大的软件注册表-

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴

解决 NPM 国内下载安装第三方包慢的问题

在使用 NPM 过程中,发现在国内下载安装第三方包的速度比较慢的问题。使用淘宝的 NPM 镜像(地址:https://npm.taobao.org/),可以解决这个问题。

如何发布npm包,删除npm包

注册并在本机添加npm用户(已注册可忽略)完成了上面的步骤之后,我们接下来要在www.npmjs.com注册一个账号,这个账号会被添加到npm本地的配置中,下面命令行将会使用到。

创建一个自己的Vue UI组件库,并将它发布在npm上

本文仅限于入门级,没有成规模制作,希望能对你有所帮助。因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新。

npm使用国内淘宝镜像的方法

npm的服务器在国外,拉取npm包的列表、下载包这个过程会比较缓慢。凡是包管理工具基本都有这个问题,例如maven、pip等,这些问题都可以通过配置镜像来解决。阿里巴巴提供了maven库,清华大学有pip源

封装Vue组件并发布到npm(完美解决组件中的静态文件引用)

不少前端开发者学习到一定阶段都会去封装一些自己的组件并将其开源。笔者在学习过程中发现,发布的资源包基本分为两类

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!