Rollup是什么？

首先我们项目中常用的是webpack，因为类似于create-react-app自带的都是webpack打包，用Rollup官网的话说 ： Rollup的设计目标是将JavaScript模块打包成更小、更高效的输出文件。它专注于ES6模块的支持。 并且Tree Shaking功能，也是Rollup最早支持的，并且也是默认开启的， 随后webpack进行更新也支持了Tree Shaking。 总而言之， 就是类似于组件库，公共函数库等我们可以优先选择Rollup ， 因为会更轻量。 webpack就是更灵活，插件市场更丰富。

首先我们需要在根目录创建rollup.config.js文件

大家也可以看出来rollup个人感觉配置还是比较简单的

import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import scss from 'rollup-plugin-scss';
import { terser } from  'rollup-plugin-terser';

const overrides = {
  exclude: ['src/**/*.stories.tsx', 'src/**/*.test.tsx', 'setupTests.ts'],
};

const config = {
  input: 'src/index.tsx',
  output: {
    file: 'dist/index.js',
    format: 'es',
    sourcemap: true,
    inlineDynamicImports: true,
  },
  plugins: [
    nodeResolve(),
    commonjs(),
    json(),
    typescript({ tsconfigOverride: overrides }),
    scss({
      fileName: 'index.css',
    }),
    terser(),
  ],
  external: ['react', 'react-dom'],
};

export default config;

因为项目使用的是ts，所以我也附上tsconfig.json文件

{
  "compilerOptions": {
    "declaration": true,
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

最后配置package.json文件，注意要指定files和main地址， files代表上传那个文件到npm，main意思是从那个入口文件进去。

  "name": "liyu-component",
  "author": {
    "name": "liyu",
    "email": "liyu990205@gmail.com"
  },
  "files": [
    "dist/*"
  ],
  "main": "dist/index.js",
  "version": "0.1.1",
  "scripts": {
    "build": "rollup --c",
  },

先执行npm login， 登陆成功后， 最后执行npm publish，就可以成功把npm库发布到npm上了。