关闭

使用webpack开发npm插件

时间: 2018-04-04阅读: 2144标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

npm未来将支持 monorepo 特性,带来源码管理新姿势!

从架构的角度来看,将大型单体代码库拆分为较小的、独立封装的一系列模块通常是个好方法。从微服务到可复用组件库,很多技术都很适合模块化。但从版本发布和源代码管理的角度来看,它也可能是一场噩梦。

教你 30 秒发布一个 TypeScript 包到 NPM

这篇文章要求你有一定的 JS 、TS 和 NPM 的知识,如果你写过普通的 NPM 包就更好啦~如果没有的话网上也很多教程的,都很简单~发布过 npm 包的同学都知道,初始化一个 npm 项目,直接用 npm init -y 就可以了,那如果要用 ts 呢,直接 tsc --init 即可。

vue-cli 3.x 开发插件并发布到 npm

抽空写了一个 textarea,打算发布到 npm 的时候却遇到了问题,之前用 vue-cli 2.x 的时候,打包配置项非常透明,可以很容易的修改,但升级到 vue-cli 3.x 之后,反而一脸懵逼

关于 npm run eject 报错的问题

关于 npm run eject 报错的问题,昨天新开React的项目, 刚刚一上手就碰到问题,解决方法(前提你有git).出错的原因:应该是git没有安装好,或者代码没有提交上git

npm 执行多个命令_如何用npm同时执行多条监听命令

直接通过&&连接多条命令,在npm run start的时候,发现只停留在第一个命令执行监听,后面的命令都没有执行。只能通过打开多个窗口分别执行多条命令,那么有没有办法实现一条npm命令执行多条监听呢?

NPM 机制

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

解决npm install(proxy config is set properly. See: npm help conffig)失败问题

重装电脑系统后,使用npm install初始化项目依赖失败了,经过报错信息查询解决办法,最终找到了两个比较好的方案,在此总结一下,以便下次再遇到此类问题。

yarn和npm的区别对比_比较npm和yarn 命令行

npm 是目前js最流行的包管理工具,通过 npm 可以安装、共享、分发代码,管理项目依赖关系。Yarn 是为了弥补 npm 的一些缺陷而出现的,Yarn 定位为快速、可靠、安全的依赖管理工具。

npm、cnpm与yarn

为什么我们需要一个包管理工具?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站

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

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

点击更多...

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