【rollup】rollup打包一个npm包

---

前言

rollup打包一个npm包的例子

---

一、项目的目录结构

二、编译详细配置

1.package.json相关配置和依赖

代码如下（示例）：

{
    
    
  "name": "mlpass-country-selector",
  "version": "1.0.30",
  "description": "一个国家选择器组件",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "browser": "dist/index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c",
    "dev": "rollup --config rollup.config.dev.js -w"
  },
  "keywords": [
    "前端",
    "国家选择器"
  ],
  "author": "zhoumingle",
  "files": [
    "dist"
  ],
  "license": "ISC",
  "devDependencies": {
    
    
    "@babel/cli": "^7.19.3",
    "@babel/core": "^7.18.13",
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/preset-env": "^7.18.10",
    "@rollup/plugin-alias": "^3.1.9",
    "@rollup/plugin-commonjs": "^23.0.2",
    "autoprefixer": "^10.4.8",
    "eslint": "^8.27.0",
    "eslint-plugin-react": "^7.31.10",
    "node-sass": "^8.0.0",
    "rollup": "^2.78.1",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-dts": "^4.2.2",
    "rollup-plugin-less": "^1.1.3",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-serve": "^2.0.1",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.33.0",
    "sass": "^1.56.1",
    "typescript": "^4.8.2"
  },
  "browserslist": [
    "defaults",
    "not ie < 8",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ],
  "dependencies": {
    
    
    "@babel/polyfill": "^7.12.1"
  }
}

2.rollup相关配置

rollup.config.dev.js代码如下（示例）：

import ts from 'rollup-plugin-typescript2';
import path from 'path';
import dts from 'rollup-plugin-dts';
import postcss from 'rollup-plugin-postcss';
import babel from 'rollup-plugin-babel';
import {
    
     terser } from 'rollup-plugin-terser';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import autoprefixer from 'autoprefixer';
import alias from '@rollup/plugin-alias';
const resolveDir = dir => path.join(__dirname, dir);
export default [{
    
    
    // 入口文件
    input: './src/core/index.ts',
    output: [
        // 打包esModule
        {
    
    
            file: path.resolve(__dirname, './dist/countrySelector.esm.js'),
            format: 'es',
            sourcemap: true
        },
         // 打包common js
        {
    
    
            file: path.resolve(__dirname, './dist/countrySelector.cjs.js'),
            format: 'cjs',
            sourcemap: true
        },
       // 打包 AMD CMD UMD
        {
    
    
            input: './src/core/index.ts',
            file: path.resolve(__dirname, './dist/countrySelector.js'),
            format: 'umd',
            name: 'tracker',
            sourcemap: true
        }
    ],
    // 配置ts
    plugins: [
        ts(),
        postcss({
    
    
            plugins: [
              autoprefixer()
            ]
        }),
        babel({
    
    
            exclude: 'node_modules/**'
        }),
        terser(),
        serve({
    
    
            open: true,
            port: 8888,
            contentBase: '',
        }),
        livereload(),
        alias({
    
    
            entries: [
                {
    
     find: '@', replacement: resolveDir('src') }
            ]
        })
    ]
}, {
    
    
    // 打包声明文件
    input: './src/core/index.ts',
    output: {
    
    
        file: path.resolve(__dirname, './dist/countrySelector.d.ts'),
        format: 'es',
    },
    plugins: [dts()]
}];

rollup.config.js代码如下（示例）：

import ts from 'rollup-plugin-typescript2';
import path from 'path';
import dts from 'rollup-plugin-dts';
import postcss from 'rollup-plugin-postcss';
import babel from 'rollup-plugin-babel';
import {
    
     terser } from 'rollup-plugin-terser';
import commonjs from '@rollup/plugin-commonjs';
import autoprefixer from 'autoprefixer';
import alias from '@rollup/plugin-alias';
import {
    
     DEFAULT_EXTENSIONS } from '@babel/core';
const resolveDir = dir => path.join(__dirname, dir);
export default [{
    
    
    // 入口文件
    input: './src/core/index.ts',
    output: [
        // 打包esModule
        {
    
    
            file: path.resolve(__dirname, './dist/countrySelector.esm.js'),
            format: 'es',
        },
         // 打包common js
        {
    
    
            file: path.resolve(__dirname, './dist/countrySelector.cjs.js'),
            format: 'cjs',
        },
       // 打包 AMD CMD UMD
        {
    
    
            input: './src/core/index.ts',
            file: path.resolve(__dirname, './dist/countrySelector.js'),
            format: 'umd',
            name: 'tracker',
        }
    ],
    // 配置ts
    plugins: [
        ts(),
        commonjs(),
        postcss({
    
    
            plugins: [
              autoprefixer()
            ]
        }),
        babel({
    
    
            exclude: 'node_modules/**',
            extensions: [
              ...DEFAULT_EXTENSIONS,
              '.ts',
              '.tsx'
            ],
          }),
        terser(),
        alias({
    
    
            entries: [
                {
    
     find: '@', replacement: resolveDir('src') }
            ]
        })
    ]
}, {
    
    
    // 打包声明文件
    input: './src/core/index.ts',
    output: {
    
    
        file: path.resolve(__dirname, './dist/countrySelector.d.ts'),
        format: 'es',
    },
    plugins: [dts()]
}];

.babelrc文件配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 2,
        "targets": {
          "ie": 8
        }
      }
    ]
  ]
  // "plugins": [
  //   ["@babel/plugin-transform-runtime"]
  // ]
}

---

其他参考文档

rollup官网: https://www.rollupjs.com/

rollup插件官网:https://www.npmjs.com/package/rollup-plugin-scss

rollup常用插件详细使用:https://www.cncsto.com/article/51402