使用Rollup打包并发布到npm

更新日期: 2019-07-05阅读量: 1886标签: Rollup

前言

其实用 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


链接: https://www.fly63.com/article/detial/4534

使用rollup.js打包javasript

rollup是一款小巧的javascript模块打包工具,更适合于库应用的构建工具;可以将小块代码编译成大块复杂的代码,基于ES6 modules,它可以让你的 bundle 最小化

前端组件/库打包利器rollup使用与配置实战

目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发布自己的库和组件。

Rollup.js: 开源JS库的打包利器

Rollup 是一个 JavaScript 模块打包器,说到模块打包器,自然就会想到 webpack。webpack 是一个现代 JavaScript 应用程序的静态模块打包器,那么在 webpack 已经成为前端构建主流的今天,为什么还要用 Rollup 呢?

rollup模块打包器入门

rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,其源码中模块的导入导出采用的是ES6模块语法,即源码需要采用ES6语法进行编写。

rollup配置及使用

业务线长期的积累产生了许许多多重复性的工具方法,业务功能模块等, 我们正好可以用 rollup 构建一个 npm 私服工具包,便于后期业务使用,减少重复性的代码编写。

Vue 是如何用 Rollup 打包的?

Rollup 是一个 JavaScript 模块打包器,它将小块的代码编译并合并成更大、更复杂的代码,比如打包一个库或应用程序。它使用的是 ES Modules 模块化标准,而不是之前的模块化方案

打包工具 rollup.js 入门教程

打包工具的作用是,将多个 JavaScript 脚本合并成一个脚本,供浏览器使用。浏览器需要脚本打包,主要原因有三个。rollup.js 的开发本意,是打造一款简单易用的 ES 模块打包工具,不必配置,直接使用。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!