rollup实战-从零开始开发自己的组件库

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

rollup和webpack都是优秀前端打包工具，但是它们的专注点不一样，它们之间的区别如下

所以，总的来讲
开发应用：适合使用webpack
开发类库：适合使用rollup

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前期准备安装插件

（1）优化

• rollup-plugin-node-resolve :帮助 Rollup 查找外部模块，然后导入

  • 更好的引入模块 import a from './a.js'可以缩写为 import a from './a',允许import a from './a.vue，标准rollup只允许import a from './a.js
  • 不使用，则对所有引入的模块在打包文件中时只是简单声明依赖，而不会将模块代码引入，使用后，则会模块中的代码打包进入输出文件

  import resolvePlugin from "rollup-plugin-node-resolve";
  export default {
    plugins: [
    	...
      resolvePlugin(),
      ...
    ],
  };
  

• rollup-plugin-json：处理json文件

  import resolvePlugin from "rollup-plugin-node-resolve";
  export default {
    plugins: [
    	...
      resolvePlugin({
      	include:['src/**'],
      	exclude:['node_modules/**']
      }),
      ...
    ],
  };
  

（2）vue

• rollup-plugin-vue：vue文件处理

  npm i -D rollup-plugin-vue vue-template-compiler @vue/compiler-sfc 需要全部安装，它们互为依赖

  import vuePlugin from "rollup-plugin-node-resolve";
  export default {
    plugins: [
    	...
     vuePlugin({
        css: true,
  	  compileTemplate: true,
        target: "browser", //browser | node
        //include: [], //string | RegExp | (string | RegExp)[]
        exclude: [],
        preprocessStyles: [], //样式预编译
      }),
      ...
    ],
  };
  

  ---

（3）js

• rollup-plugin-babel — 让我们可以使用es6新特性来编写代码
• rollup-plugin-terser — 压缩js代码，包括es6代码压缩
• rollup-plugin-eslint — js代码检测
• rollup-plugin-commonjs —将CommonJS模块转换为 ES2015 供 Rollup 处理

（4）css

• rollup-plugin-postcss

(5) 开发

• rollup-plugin-livereload 热更新
• rollup-plugin-serve 本地服务器

   servePlugin({
    //打开ip
    host: "localhost",
    
    //端口号
    port: 8080,
    
    //设置静态资源所在的目录 访问http://localhost:8080->当前文件所在目录的绝对目录/public
    contentBase: ["public", "dist"], //string | string[]
    
    //auto open browser
    open: false,
    
    //自动打开的默认目录
    openPage: "/index.html",
  
    // Show server address in console (default: true)
    verbose: true,
    
    //发生错误显示地址 设置false为404
    historyApiFallback: "/200.html", // false | string
  
    //https模式，默认为http
    https: {},
  
    //设置响应头
    headers: {
       "Access-Control-Allow-Origin": "*", //跨域
       foo: "bar",
     },
  
    //开启监听后回调函数
    onListening(server) {
      // server.address
      // server.host
    },
  }),
  

二、调试

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。