折腾一番后，我决定放弃——记一次rollup开箱体验

2019.11.22

最近折腾了一下rollup打包构建工具，总结起来一句话：从入门到放弃。

为什么这样说呢，因为如果你不知道rollup和webpack的区别的话，盲目的使用它会给你带来很多困难。简单来讲，rollup比较适合工具类库的打包构建，而webpack适合应用的打包构建。

rollup天生具有精简打包的能力，但是这种能力严重依赖于它严格的模块规范类型的限制。如果使用rollup对你的工程应用进行打包编译，遇到一大堆报错就会让你明白这个道理。下面就让我来分享一下，我的放弃历程吧。

webpack和rollup的配置文件基本都差不多，只是某些字段不太相同，思路都一样——输入，中间经过plugin进行代码处理，输出。

先来个最基础的配置：

export default {
  input: "client/view/index.js",
  output: {
    file: "dist/static/bundle.js",
    format: "es"
  }
};

运行一下rollup，发现了意料之中的报错：

报错

很明显，无法解析jsx语法。引入babel，rollup需要使用plugin来使用babel，同样也需要.babelrc文件配置。

import babel from "rollup-plugin-babel";
export default {
  input: "client/view/index.js",
  output: {
    file: "dist/static/bundle.js",
    format: "es"
  },
  plugins:[
    babel()
  ]
};

.babelrc文件：

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

运行rollup，又是报错

image.png

说找不到 Home 这个组件，看一下代码

image.png

文件是在的，rollup本身不具备路径解析能力的，需要另一个plugin：

import babel from "rollup-plugin-babel";
import resolve from "rollup-plugin-node-resolve";

export default {
  input: "client/view/index.js",
  output: {
    file: "dist/static/bundle.js",
    format: "es"
  },
  plugins:[
    resolve(),
    babel()
  ]
};

运行rollup，继续报错。

image.png

react 不是通过 export default 暴露出来的？看一下 react npm 包，发现确实不是

image.png
commonJs 规范，rollup默认使用 es module 类型解析引用的文件，遇到commonJs 规范的引用就需要另外一个插件来支持了。

import babel from "rollup-plugin-babel";
import resolve from "rollup-plugin-node-resolve";
import commonJs from "rollup-plugin-commonjs";

export default {
  input: "client/view/index.js",
  output: {
    file: "dist/static/bundle.js",
    format: "es"
  },
  plugins:[
    resolve(),
    commonJs({
      include: "node_modules/**"
    }),
    // 注意，必须在babel前面执行，肯定要先知道规范，才能读取js文件嘛，由此可以知道，plugins 有执行顺序依赖。
    babel()
  ]
};

运行rollup，发现没有报错，打包成功了。

image.png

你以为这就完了吗？这么简单就让你得到你想要的，别做梦了，man！引用个 react hook 试试：

image.png

run rollup，哈哈，又报错了！

image.png

报错的意思是 useState 这个 function 不是通过 export 暴露出来的，去看一下 react npm 包，发现的确不是，咋办？我找了一大堆网上的资料，还是要看官方文档靠谱。

import babel from "rollup-plugin-babel";
import resolve from "rollup-plugin-node-resolve";
import commonJs from "rollup-plugin-commonjs";

export default {
  input: "client/view/index.js",
  output: {
    file: "dist/static/bundle.js",
    format: "es"
  },
  plugins:[
    resolve(),
    commonJs({
      include: "node_modules/**",
      namedExports: { react: ["useState", "Component", "useRef", "useEffect"] }
    }),
    // 注意，必须在babel前面执行，肯定要先知道规范，才能读取js文件嘛，由此可以知道，plugins 有执行顺序依赖。
    babel()
  ]
};

commonJs plugin 支持一个参数，你需要把想要以 import 方式引入的变量名称和对应的包名称都写在里面。

哇，好崩溃啊！本来光是处理个js文件要引入这么多插件就够让人头疼的了，还要搞这么多特殊配置，要是再引用个别的什么包，还让人活不！

果断放弃了，以后可能再也不碰它了。不过听说vue是使用rollup打包的，有时间可以看看他们怎么配置的。

从入门到放弃，码农们，加油吧！还有更多的新东西等着我们学习，学不过来也得学，好崩溃啊。