使用webpack开发npm插件

时间: 2018-04-04阅读: 2311标签: 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、cnpm与yarn

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

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

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

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

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

npm scripts 参数_npm scripts使用指南

什么是 npm 脚本?npm 允许在package.json文件里面,使用scripts字段定义脚本命令。上面代码是package.json文件的一个片段,里面的scripts字段是一个对象。

Npm install 加速

无法npm publish。 因为publish频次不高,需要的时候切换回npm的官方registry就可以了。自动选择问题 有的一套脚本可能会在国内和国外不同的服务器上运行

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

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

npm安装模块时报错:no such file or directory

使用node.js和npm,在安装模块的时候报错npm WARN saveError ENOENT: no such file or directory, open ...的解决办法。这个原因就是因为项目没有进行初始化,缺少package.json文件造成的。需要package.json才能npm install。 可以npm init初始化生成一个package.json。

你可能不知道的 npm 实用技巧

绝大多数前端和 Node.js 开发者每天的日常工作都离不开 npm,不知道你对 npm 的观感如何?如果你觉得 npm 很棒,那么不妨看下这篇文章,说不定其中有你之前没留意过的小窍门

CommonJS 包规范与 NPM 包管理

NPM 实践了 CommonJS 包规范规范,帮助我们安装和管理依赖包,使得 Node 项目的第三方模块更加规范便捷,可以在 NPM 平台上找到所有共享的插件。

在NPM发布自己造的轮子

自从Node.js出现,它的好基友npm(node package manager)也是我们日常开发中必不可少的东西。npm让js实现了模块化,使得复用其他人写好的模块(搬砖)变得更加方便,也让我们可以分享一些自己的作品给大家使用(造轮子)

点击更多...

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