chenshenhai/rollupjs-note

《Rollup.js 实战学习笔记》已完结 😆

Rollup.js 实战学习笔记

前言

2020年5月

今年的五一假期有 5天小长假，回顾以前的笔记，发现 Rollup 已经更新到 2.x ，而且官方提供了很多丰富的插件plugins github.com/rollup/plugins/。趁着假期还有点空闲时间，把本笔记的使用方式更新到最新版(截至2020年5月)的使用方式。

2018年8月

最近几个月自己开发一些js库或组件库，费了九牛二虎之力搭建了webpack脚手架，然后还要配置一堆loader，最后编译出来的代码还夹带了一堆webpackJsonp([0], .....) 的代码，使得编译后的ES5代码（未混淆）可读性降低了，也导致了结果代码体积增大。

在寻找新的编译工具时候，发现Vue.js，React.js等流行库的源码都用了rollup.js来编译代码，同时相关库的编译也输出了各种模块规范AMD、CommonJS、UMD和IIFE。因此选择了rollup.js来实践开发日常的工具，在玩了几个月的的rollup.js后，将学习的过程中记录成这本书，也沉淀了学习过程中的demo，方便以后搭建脚手架时候查看。

关于本书

• 关于作者(我)
• 作者(我)Github
• gitbook在线阅读入口
• 本书便捷阅读入口 chenshenhai.com/rollupjs-note
• 如有错误或疑问欢迎，提交issues或PR

目录

• Rollup.js 实战学习笔记
• [0.致读者]
  • 0.1 本书初衷
  • 0.2 参考资料
• [1. 快速开始]
  • 1.1 快速配置文件
  • 1.2 ES6+编译
  • 1.3 开发模式
  • 1.4 生产模式
  • 1.5 Node.js使用API模式
• [2. js编译]
  • 2.1 多文件输入输出编译
  • 2.2.1 AMD 模块类型编译 (上)
  • 2.2.2 AMD 模块类型编译 (下)
  • 2.2.3 CommonJS 模块类型编译
  • 2.2.4 IIFE 模块类型编译
  • 2.2.5 UMD 模块类型编译
  • 2.3 Node.js使用API模式的热编译
  • 2.4 node模块引用
  • 2.5 json文件引用
• [3. css编译]
  • 3.1 css引用
  • 3.2 scss编译
  • 3.3 less编译
• [4. 框架使用]
  • 4.1 React.js编译
  • 4.2 Vue.js编译
• [5. 插件开发]
  • 5.1 开发插件helloworld
• [6. 其他实战]
  • 6.1 TypeScript编译
  • 6.2 Babel7 编译

更多学习笔记

更多前端技术学习和开源学习教程可关注公众号 DeepSeaCode (大海码 )

rollupjs-note's Issues

1.1有一个typo

编译配置文件路径 ./build/rolluo.config.js

6.1 package.json 有 type

上面寫build.js
生产模式配置基本 ./build/rollup.config.build.js

./package.json 裡面是prod.js

{
"scripts": {
  "build": "node_modules/.bin/rollup -c ./build/rollup.config.prod.js"
},
}

配置文件的文件名-手误

build下的配置文件名的单词写错啦 rollup

chapter-04-02 示例报错

你好，你的VUE编译的例子跑起来报错
node_modules_vue@2.5.21@vue\dist\vue.runtime.esm.js (4382:18)
4380: var options = {
4381: _isComponent: true,
4382: _parentVnode: vnode,
^
4383: parent: parent
4384: };

chapter-02-02-04

怎么我的编译出来的出错了regeneratorRuntime is not defined,然后我安装了babel-runtime和babel-plugin-transform-runtime
修改了配置"plugins": [
"transform-object-rest-spread",
["transform-runtime",{
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}]
],
还是不行 (
!) Unresolved dependencies
https://github.com/rollup/rollup/wiki/Troubleshooting#treating-module-as-external-dependency
babel-runtime/regenerator (imported by src\index.js)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
babel-runtime/regenerator (guessing '_regeneratorRuntime')

怎样合并子组件中的css

有A.jsx内部引用A.css和B.jsx子组件，B.jsx组件中引用了B.css，怎么样才能打包出一个A.min.css使其包含A.css和B.css？

第二章chapter02 第一篇文章

demo的地址写错了
还有npm模块的安装项 跟你项目地址有的不一样
后面的文章 这些部分都是复制的吧

scss编译 这篇的sass配置项

process: function(context, payload) {
return new Promise(( resolve, reject ) => {
sass.render({
file: context
}, function(err, result) {
if( !err ) {
resolve(result);
} else {
reject(err)
}
});
})
}
这项配置大概是啥意思?我看了两篇没看明白
https://github.com/egoist/rollup-plugin-postcss 的loader

https://github.com/egoist/rollup-plugin-postcss/blob/master/src/sass-loader.js

第二章 编译成amd下

生产模式配置基本 ./build/rollup.config.build.js
改成
生产模式配置基本 ./build/rollup.config.prod.js