Rollup 打包并发布到 npm

前言

其实用 webpack 也可以打包库，不过根据create-react-app项目贡献者的说法：rollup适合发布 js 库，而webpack更适合做应用程序。简而言之就是：rollup 打包 js 比 webpack 方便，而 webpack 打包 css 比 rollup 方便，相信大家已经有所了解了，至于选用哪个相信大家已经清楚了，下面我们来详细讲解如何用 rollup 打包 js 库步骤。

初始化项目

使用npm init命令生成package.json 文件，输入 name、version、main、repository、author、license，如下是我生成的 package.json 文件

{
  "name": "hiynn-design",
  "version": "0.0.1",
  "description": "base on react and antd layout framework",
  "main": "lib/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hiynn-com/hiynn-design.git"
  },
  "keywords": [
    "react",
    "antd",
    "layout"
  ],
  "author": "zhangwei",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/hiynn-com/hiynn-design/issues"
  },
  "homepage": "https://github.com/hiynn-com/hiynn-design#readme"
}

创建 github 新项目

名称就用刚才我们 npm init 的 name 'hiynn-design'，然后初始化 git执行：git init & git remote add origin your-git-path。

添加 rollup 和项目依赖包

"dependencies": {
    "antd": "^3.20.7",
    "react": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-import": "^1.12.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-flow": "^6.23.0",
    "cssnano": "^4.1.10",
    "postcss-cssnext": "^3.1.0",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-nested": "^4.1.2",
    "postcss-url": "^8.0.0",
    "rollup": "^1.18.0",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-clear": "^2.0.7",
    "rollup-plugin-commonjs": "^10.0.1",
    "rollup-plugin-eslint": "^7.0.0",
    "rollup-plugin-flow": "^1.1.1",
    "rollup-plugin-image": "^1.0.2",
    "rollup-plugin-json": "^4.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-peer-deps-external": "^2.2.0",
    "rollup-plugin-postcss": "^2.0.3",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-uglify": "^6.0.2",
    "rollup-plugin-url": "^2.2.2"
  }

添加rollup.config.js 文件

/*
    rollup 配置文件
*/
import postcss from "rollup-plugin-postcss";
import { eslint } from "rollup-plugin-eslint";
import commonjs from "rollup-plugin-commonjs";
import clear from "rollup-plugin-clear";
import external from "rollup-plugin-peer-deps-external";
import url from "rollup-plugin-url";

import babel from "rollup-plugin-babel";
import resolve from "rollup-plugin-node-resolve";
import { uglify } from "rollup-plugin-uglify";
import replace from "rollup-plugin-replace";
import json from "rollup-plugin-json";

import nested from "postcss-nested";
import cssnext from "postcss-cssnext";
import cssnano from "cssnano";

const env = process.env.NODE_ENV;

export default {
  input: "src/index.js",
  output: {
    dir: "lib",
    format: "cjs",
    sourcemap: true,
    exports: "named"
  },
  //告诉rollup不要将此lodash打包，而作为外部依赖
  external: ["react", "lodash", "antd"],
  // 是否开启代码分割
  experimentalCodeSplitting: true,
  plugins: [
    postcss({
      extensions: [".pcss", ".less", ".css"],
      plugins: [nested(), cssnext({ warnForDuplicates: false }), cssnano()],
      extract: false // 无论是 dev 还是其他环境这个配置项都不做 样式的抽离
    }),
    url(),
    babel({
      exclude: ["node_modules/**"]
    }),
    resolve(),
    commonjs({
      include: ["node_modules/**"]
    }),
    json(),
    eslint({
      include: ["src/**/*.js"],
      exclude: ["src/styles/**"]
    }),
    replace({
      "process.env.NODE_ENV": JSON.stringify(env)
    }),
    env === "production" && uglify()
  ]
};

添加 .babelrc 文件

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

添加 .eslintrc 文件

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        //your-rules in here
    }
}

写一个例子

创建 src 文件夹添加 index.js、Demo.js 和 styles/demo.pcss 文件，内容很简单，代码如下：

styles/demo.pcss

.demo-container {
  .demo-wrapper {
    color: red;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}

index.js

import Demo from "./Demo";

export default Demo;

Demo.js

import React, { Component } from "react";
import { Button } from "antd";
import "./styles/demo.pcss";

class Demo extends Component {
  render() {
    return (
      <div className="demo-container">
        <div className="demo-wrapper">this is my demo wrapper</div>
        <Button type="primary">this is demo component</Button>
      </div>
    );
  }
}

export default Demo;

文件都加好了，现在我们来编译打包一下

添加如下代码到 package.json 文件中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c",
    "prepublishOnly": "npm run release",
    "release": "npm run build:dev && npm run build:prod",
    "build:prod": "NODE_ENV=production rollup -c",
    "build:dev": "NODE_ENV=development rollup -c"
  },

然后，执行 yarn build:prod ，这样就生成了 lib 文件夹和 index.js 文件，这个就是你最终打包的文件。

发布到 npm

npm login
npm version new-version
npm publish

git push origin --tags

使用 npm 包

如，我这里的包名是 hiynn-layout

yarn add hiynn-layout

import hl from 'hiynn-layout'

总结：

1、rollup 适合打包 js 库，不适合打包 css，如果想制作 基于 react 和antd 的组件首选 webpack
2、rollup-plugin-commonjs这个包一定要引入好，并且注意使用

//告诉rollup不要将此lodash打包，而作为外部依赖，否则会报 <div >不识别或者  React 的Component 各种错
external: ["react", "lodash", "antd"],

commonjs({
      include: ["node_modules/**"]
    }),

3、npm 和 git 使用共同的 version和 tags
4、npm 发布用下面的，添加包用上面的

npm set registry https://registry.npm.taobao.org
npm set registry http://registry.npmjs.org

引用

Rollup常用配置
How to Bundle Stylesheets and Add LiveReload With Rollup
如何使用 Rollup 打包 JavaScript
rollup打包js的注意点
10分钟快速进阶rollup.js
rollup-starter-lib
手把手带你走进下一代的ES6模块打包工具—Rollup