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'

總結：

一、rollup 適合打包 js 庫，不適合打包 css，若是想製做 基於 react 和antd 的組件首選 webpack
二、rollup-plugin-commonjs這個包必定要引入好，而且注意使用

//告訴rollup不要將此lodash打包，而做爲外部依賴，不然會報 <div >不識別或者  React 的Component 各類錯
external: ["react", "lodash", "antd"],

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

三、npm 和 git 使用共同的 version和 tags
四、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