使用rollup打包react組件併發布到npm官網

時間 2020-01-24

標籤使用 rollup 打包 react 組件併發 npm 欄目 React 简体版

原文原文鏈接

最近在學習react，而後想經過作個具體的例子來學習react，因而看到網上有個日本網友作了一個cd播放器，不過他是用jquery實現的，因而我打算用react來重寫這個組件併發布到npm上面。而後我就用create-react-app這個腳手架來打包這個組件，代碼都寫好了，不過問題是我怎麼發佈到npm上面，因而我就直接在index.js裏面寫了一個css

export default ReactCdPlayer

可是這個真的好使的嗎，當我成功發佈到Npm上以後而後經過node

yarn add react-cd-player

來導入剛剛發佈的組件，在項目中這樣引入：react

import cdplayer from 'react-cd-player'

編譯一下，報錯！

很好，這個提示很明顯就是你發佈的這個包在項目中成功引入了，可是它不是標準的es5代碼，也就是說react-cd-player導出的是es6的代碼，因此必定要用babel來轉譯一下，一想到這裏咱們確定會想到使用webpack來打包，但是，我說了但是，當我把這個issue提到create-react-app上面的時候，代碼貢獻者推薦我使用rollup，因而一場圍繞rollup的填坑之旅就此出發。jquery

因而在網上找關於rollup打包react組件的文章，竟然沒有！！！看來得本身搞定了，因而我就處處找，終於通過幾番周折我在react-redux上面找到了使用rollup打包的源碼了，不過他們是用來打包redux的，因而我就按照他們的代碼複製到個人rollup.config.js裏面，打包的時候也不是很順利出了幾個錯，我如今總結一下，也分享給網友。webpack

問題1、

$ rollup -c
?   Error: 'default' is not exported by node_modules/material-ui-icons/FastRewind.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
src/containers/ReactCdPlayer.js (6:7)
4: import PropTypes from 'prop-types';
5: import FastForward from 'material-ui-icons/FastForward';
6: import FastRewind from 'material-ui-icons/FastRewind';
          ^
7: import { LinearProgress } from 'material-ui/Progress';

error Command failed with exit code 1.

其實這個問題是rollup-plugin-commonjs這個插件形成的，好像事關commonjs umd 等等，解決辦法就是下面的這段代碼：git

commonjs({
  namedExports: {
    // left-hand side can be an absolute path, a path
    // relative to the current directory, or the name
    // of a module in node_modules
    'node_modules/my-lib/index.js': [ 'named' ]
  }
})

問題2、

☁  react-cd-player [master] ⚡ yarn build:umd:min
yarn build:umd:min v0.24.5
$ cross-env BABEL_ENV=rollup NODE_ENV=production rollup -c -o dist/ReactCdPlayer.min.js
⚠️   'default' is not exported by 'node_modules/core-js/library/modules/es6.object.to-string.js'
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
commonjs-proxy:/Users/zhangwei/Work/Github/react-cd-player/node_modules/core-js/library/modules/es6.object.to-string.js (1:205)
1: import * as es6_object_toString from "/Users/zhangwei/Work/Github/react-cd-player/node_modules/core-js/library/modules/es6.object.to-string.js"; export default ( es6_object_toString && es6_object_toString['default'] ) || es6_object_toString;
                                                                                                                                                                                                                ^

✨  Done in 10.56s.

這個問題我已經提issue了，可是沒人回答我，若是網友有知道的能夠給我留言。雖然沒有解決可是也不影響咱們打包，說穿了只是一個警告。因而成功打包，我把rollup.config.js和package.json還有.babelrc相關代碼貼出來，供網友參考，後續若是我解決了上面的問題我也會更新。es6

.babelrc

{
    "presets": [
        [  
            "es2015",  
            {  
              "modules": false  
            }  
          ],
        "react",
        "stage-2"
      ],
    "env": {
        "test": {
          "plugins": ["istanbul"]
        },
        "commonjs": {
          "plugins": [
            ["transform-es2015-modules-commonjs", { "loose": true }]
          ]
        },
        "es": {
          "plugins": [
            "./use-lodash-es"
          ]
        },
        "rollup": {
          "plugins": [
            "./use-lodash-es",
            "external-helpers"
          ]
        }
      },
      "plugins": [
        "transform-class-properties",
        "transform-decorators-legacy",
        ["transform-es2015-template-literals", { "loose": true }],
        "transform-es2015-literals",
        "transform-es2015-function-name",
        "transform-es2015-arrow-functions",
        "transform-es2015-block-scoped-functions",
        ["transform-es2015-classes", { "loose": true }],
        "transform-es2015-object-super",
        "transform-es2015-shorthand-properties",
        ["transform-es2015-computed-properties", { "loose": true }],
        ["transform-es2015-for-of", { "loose": true }],
        "transform-es2015-sticky-regex",
        "transform-es2015-unicode-regex",
        "check-es2015-constants",
        ["transform-es2015-spread", { "loose": true }],
        "transform-es2015-parameters",
        ["transform-es2015-destructuring", { "loose": true }],
        "transform-es2015-block-scoping",
        "transform-object-rest-spread",
        "transform-react-jsx",
        "syntax-jsx"
      ]
  }

package.json

{
  "name": "react-cd-player",
  "homepage": "http://zhangwei900808.github.io/react-cd-player",
  "version": "0.14.1",
  "main": "lib/containers/ReactCdPlayer.js",
  "files": [
    "dist",
    "lib"
  ],
  "dependencies": {
    "classnames": "^2.2.5",
    "lodash": "^4.17.4",
    "lodash-es": "^4.17.4",
    "loose-envify": "^1.3.1",
    "material-ui": "next",
    "material-ui-icons": "^1.0.0-alpha.19",
    "node-sass-chokidar": "^0.0.3",
    "npm-run-all": "^4.0.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
    "babel-plugin-transform-es2015-block-scoped-functions": "^6.22.0",
    "babel-plugin-transform-es2015-block-scoping": "^6.24.1",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-plugin-transform-es2015-computed-properties": "^6.24.1",
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-es2015-for-of": "^6.23.0",
    "babel-plugin-transform-es2015-function-name": "^6.24.1",
    "babel-plugin-transform-es2015-literals": "^6.22.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-plugin-transform-es2015-object-super": "^6.24.1",
    "babel-plugin-transform-es2015-parameters": "^6.24.1",
    "babel-plugin-transform-es2015-shorthand-properties": "^6.24.1",
    "babel-plugin-transform-es2015-spread": "^6.22.0",
    "babel-plugin-transform-es2015-sticky-regex": "^6.24.1",
    "babel-plugin-transform-es2015-template-literals": "^6.22.0",
    "babel-plugin-transform-es2015-unicode-regex": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-react-display-name": "^6.25.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-rollup": "^3.0.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "cross-env": "^5.0.5",
    "gh-pages": "^1.0.0",
    "postcss-cssnext": "^3.0.2",
    "postcss-nested": "^2.1.0",
    "postcss-simple-vars": "^4.0.0",
    "react-scripts": "1.0.11",
    "rollup": "^0.45.2",
    "rollup-plugin-babel": "^3.0.1",
    "rollup-plugin-commonjs": "^8.1.0",
    "rollup-plugin-image": "^1.0.2",
    "rollup-plugin-node-globals": "^1.1.0",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-postcss": "^0.5.4",
    "rollup-plugin-replace": "^1.1.1",
    "rollup-plugin-uglify": "^2.0.1"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/assets/css/ -o src/assets/css/",
    "watch-css": "npm run build-css && node-sass-chokidar src/assets/css/ -o src/assets/css/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "rollup-build": "rollup -c",
    "rollup-production-build": "NODE_ENV=production rollup -c",
    "build:css": "node-sass-chokidar src/assets/css/ -o lib/assets/css/",
    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
    "build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
    "build:umd": "cross-env BABEL_ENV=rollup NODE_ENV=development rollup -c -o dist/ReactCdPlayer.js",
    "build:umd:min": "cross-env BABEL_ENV=rollup NODE_ENV=production rollup -c -o dist/ReactCdPlayer.min.js",
    "build:rollup": "npm run build:css && npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:umd:min"
  }
}

rollup.config.js

// Rollup plugins
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';
import uglify from 'rollup-plugin-uglify';
import postcss from 'rollup-plugin-postcss';
import image from 'rollup-plugin-image';

// PostCSS plugins
import simplevars from 'postcss-simple-vars';
import nested from 'postcss-nested';
import cssnext from 'postcss-cssnext';
import cssnano from 'cssnano';

export default {
  entry: 'src/containers/ReactCdPlayer.js',
  dest: 'lib/js/main.min.js',
  format: 'umd',
  moduleName: 'ReactCdPlayer',
  plugins: [
    image(),
    postcss({
      sourceMap: true, // true, "inline" or false
      extract : './lib/style/style.css',
      plugins: [
        simplevars(),
        nested(),
        cssnext({ warnForDuplicates: false, }),
        cssnano(),
      ],
      extensions: [ '.css' ],
    }),
    resolve({
      jsnext: true,
      main: true,
      browser: true,
    }),
    commonjs({
      namedExports: {'node_modules/material-ui/Progress/index.js': [ 'LinearProgress' ]}
    }),
    babel({
      exclude: '**/node_modules/**',
    }),
    replace({
      exclude: 'node_modules/**',
      ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
    }),
    (process.env.NODE_ENV === 'production' && uglify()),
  ],
};

其它問題，如：rollup如何打包image和cssgithub

個人源碼web