rollup打包vue组件

rollup安装与使用

npm i rollup -g        # 全局安装
npm i rollup -D        # 项目本地安装

rollup配置

import vue from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript2'
import postcss from 'rollup-plugin-postcss';
import cssnano from 'cssnano'
import { nodeResolve } from '@rollup/plugin-node-resolve'
import autoprefixer from 'autoprefixer'
import { terser } from 'rollup-plugin-terser'
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'

const overrides = {
  compilerOptions: { declaration: true }, // 生成.d.ts的文件
  exclude: ['tests/**/*.ts', 'tests/**/*.tsx']
}

export default {
  input: 'src/lib/index.ts',
  output: [
    {
      file: './dist/hut-umd.js',
      format: 'umd',
      name: 'hut'
    },
    {
      file: './dist/hut-es.js',
      format: 'es'
    },
    {
      file: './dist/hut-cjs.js',
      format: 'cjs'
    }
  ],
  plugins: [
    vue({
      style: {
        postcssPlugins: [
          autoprefixer(),
          cssnano()
        ]
      }
    }),
    babel({
      exclude: 'node_modules/**'
    }),
    nodeResolve(),
    typescript({ tsconfigOverride: overrides,check:false }),
    postcss({
      plugins: [
        autoprefixer(),
        cssnano()
      ]
    }),
    commonjs(),
    terser()
  ],
  external: ['vue', 'dayjs']
}

命令

使用Rollup的配置文件，可以使用rollup --config或者rollup -c指令。

//修改package.json的script字段

"dev": "rollup -c"                 // 默认使用rollup.config.js
"dev": "rollup -c my.config.js"    //使用自定义的配置文件，my.config.js

插件分析

1.rollup-plugin-babel
rollup-plugin-babel用于转换es6语法。

安装

npm i rollup-plugin-babel @babel/core @babel/preset-env --D

配置
在项目根目录创建.babelrc文件。

{
  "presets": [
      [
        "@babel/preset-env"
      ]
    ]
}

2.rollup-plugin-commonjs
rollup默认是不支持CommonJS模块的，自己写的时候可以尽量避免使用CommonJS模块的语法，但有些外部库的是cjs或者umd（由webpack打包的），所以使用这些外部库就需要支持CommonJS模块。

3.rollup-plugin-postcss autoprefixer

• 处理css需要用到的插件是rollup-plugin-postcss。它支持css文件的加载、css加前缀、css压缩、对scss/less的支持等等。
  首先，安装，npm i rollup-plugin-postcss --D，然后在rollup.config.js中配置：

• 借助autoprefixer插件来给css3的一些属性加前缀。安装npm i autoprefixer
  package.json 添加"browserslist"字段

"browserslist": [
  "defaults",
  "not ie < 8",
  "last 2 versions",
  "> 1%",
  "iOS 7",
  "last 3 iOS versions"
]

• css压缩
  cssnano对打包后的css进行压缩。使用方式也很简单，和autoprefixer一样，安装cssnano，然后配置

• 抽离单独的css文件
  rollup-plugin-postcss可配置是否将css单独分离，默认没有extract，css样式生成style标签内联到head中，配置了extract，就会将css抽离成单独的文件。当然，在页面也需要单独引入打包好的css文件。

postcss({
  plugins: [
    autoprefixer(),
    cssnano()
  ],
  extract: 'css/index.css'  
})

• 支持scss/less
  实际项目中我们不太可能直接写css，而是用scss或less等预编译器。rollup-plugin-postcss默认集成了对scss、less、stylus的支持，在我们项目中，只要配置了rollup-plugin-postcss，就可以直接使用这些css预编译器，很方便的。

3.rollup-plugin-vue

rollup-plugin-vue用于处理.vue文件。vue2和vue3项目所用的rollup-plugin-vue版本不一样，vue的编译器也不一样。

• vue2：rollup-plugin-vue^5.1.9 + vue-template-compiler
• vue3：rollup-plugin-vue^6.0.0 + @vue/compiler-sfc
• rollup-plugin-vue也是默认支持scss、less、stylus，可以在项目中直接使用。给.vue文件中的css自动加前缀，需要在rollup-plugin-vue中配置。

import vue from 'rollup-plugin-vue'
import autoprefixer from 'autoprefixer'  //同样要配置browserslist
import cssnano from 'cssnano'
export default {
  ...
  plugins:[
    vue({
      style: {
        postcssPlugins: [
          autoprefixer(),
          cssnano()
        ]
      }
    })
  ]
}

4.rollup-plugin-terser

在生产环境中，代码压缩是必不可少的。我们使用rollup-plugin-terser进行代码压缩。

import { terser } from 'rollup-plugin-terser'
export default {
  ...
  plugins:[
    terser()
  ]
}

5.rollup-plugin-serve、rollup-plugin-livereload

这两个插件常常一起使用，rollup-plugin-serve用于启动一个服务器，rollup-plugin-livereload用于文件变化时，实时刷新页面。

import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
export default {
  ...
  plugins:[
    serve({
      contentBase: '',  //服务器启动的文件夹，默认是项目根目录，需要在该文件下创建index.html
      port: 8020   //端口号，默认10001
    }),    
    livereload('dist')   //watch dist目录，当目录中的文件发生变化时，刷新页面
  ]
}

然而，此时修改src中的文件，页面并不会实时刷新，因为dist目录下的文件并没有更新。 rollup监听源文件的改动很简单，就是在执行打包命令时，添加 -w 或者 --watch

//package.json
"scripts": {
   "dev": "rollup -wc"
},

6.rollup-plugin-typescript2
如果使用了ts需要这个插件解析

import typescript from 'rollup-plugin-typescript2'

const overrides = {
  compilerOptions: { declaration: true }, // 生成.d.ts的文件
  exclude: ['tests/**/*.ts', 'tests/**/*.tsx']
}
export default {
  ...
  plugins:[
    terser()，
    typescript({ tsconfigOverride: overrides, check: false }),
    // 如果打包有ts报错就添加check: false
  ]
}

打包后，修改package.json:
这一步很重要，如果没有提供正确的路径，其他人导包引入时将无法正常引入

"main": "dist/my-lib-cjs.js",
"module": "dist/my-lib-es.js",

package.json的main和module,types,unpkg这些字段的路径是根据打包后的文件的路径来写的 并！！！！！！！！！！！

最后

然后npm发布
做完这些你就可以使用

pnpm add 你的包名

import {xxx} from '你的包名'   

！！！！！！！！！！！//注意npm发布的时候一定要注意main和module字段的指定路径是否正确，不然这么引入将报错

相关文章

相关文章

相关文章