rollup配置以及常见问题

luck 发布于2019-08-26 10:14 / 3583人阅读

摘要：近期维护组内的几个库，之前是打包的，本身功能也不复杂，但因为性能是今年组内的重点，为了更小的体积，逐步将打包工具迁移到经过一段时间的探索，逐步抽离了一份通用的配置，隐藏细节，使用者可以很方便的使用进行打包介绍提供，，，，，，等基本插件，使用

近期维护组内的几个lib库，之前是webpack打包的，本身功能也不复杂，但因为性能是今年组内的重点，为了更小的体积，逐步将打包工具迁移到rollup

经过一段时间的探索，逐步抽离了一份通用的配置，隐藏细节，使用者可以很方便的使用rollup进行打包

介绍

提供alias，eslint，resolve，common，babel，replace，postcss等基本插件，使用者可传入同名属性进行相应的plugin配置（见使用）

git地址

dev模式

提供了基本的启动服务以及热更新功能，服务启动在http://127.0.0.1:8080，热更新默认监听./src目录

生产环境

提供uglify和filesize功能

使用

安装

yarn add cerate-rollup-config --dev

使用

// rollup.config.js
const path = require("path")
const baseConfig = require("create-rollup-config");

const config = baseConfig({
    alias: {
        $common: "./src/common"
    },
    replace: {
        env: JSON.stringify(process.env.NODE_ENV)
    },
    serve: {
        port: 7001
    },
    livereload: {
        watch: "/src" // default
    }
})

export default [
    {
        input: "./src/test.js",
        output: [
            {
                file: "dist/test.js",
                format: "cjs"
            }
        ],
        ...config
    }
]

package.json配置

{
    ...,
    "scripts": {
        "build": "cross-env NODE_ENV=production rollup -c ./rollup.config.js",
        "server": "cross-env NODE_ENV=development rollup -c ./rollup.config.js --watch",
        ...
    },
    ...
}

部分plugin介绍 postcss

默认开启了minimize功能

参考：rollup-config-postcss

html

将html文件转为字符串，并支持压缩

参考：rollup-plugin-string-html

遇到的问题 引入外部包时，提示方法不存在

原因是：

当引入commonjs包时，如果该包对exports进行了重新赋值，那么通过rollup打包时，获取不到该值，只能通过namedExports来告知rollup

所以我们打包时，可以输出多个格式，cjs+umd

参考：https://github.com/rollup/rol...

同时使用 export default 和export

写业务代码的时候，有时候会一起使用export default和export，但在rollup中一起使用的时候，需要注意，打包出来的包是这样的

// test.js
export default { test: "test" }
export const test2 = "test2"

// 打包后
exports.default = { test: "test" }
exports.test2 = "test2"

这样要注意，通过require("test")，导入的对象是

{
    default: {
        test: "test"
    },
    test2: "test2"
}

可能与你的预期不一致，除非加default，require("test").default

babel有个插件可以解决这个问题：https://github.com/59naga/bab...

云服务器 GPU云服务器服务器配置以及价格腾讯云创建服务器以及配置配置云服务器以及网站上线 ROLLUP

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105834.html

rollup文档翻译中文文档

摘要：既可以通过一个配置文件使用命令行接口来调用，也可以他自己的使用。使用最简单的方法就是通过命令行接口。命令缩写会以监视模式运行。这时运行下将不会有错误抛出，包含导入的组件。介绍概览 rollup是一个js打包器，用来将很细碎的js编译打包成大的复杂的东西，像是一个库或者一个应用。其使用了ES6自带的新标准来格式化和打包js代码，而不是原先的Commonjs或者AMD这类解决方案。ES...

enrecul101 2019-08-20 17:31 评论0 收藏0
[译]教程：如何使用Rollup打包JavaScript

摘要：教程如何使用打包通过这个系列教程一步一步学习如何使用更小更快的取代和打包文件。安装并且创建配置文件。提示是告诉我们实际需要哪些插件的集合。通过下面的命令安装两个插件更新然后，引入插件并添加进配置注意属性是为了帮助模块迁移到的一部分。教程：如何使用Rollup打包JavaScript 通过这个系列教程一步一步学习如何使用更小更快的Rollup取代webpack和Browserify打包...

luoyibu 2019-08-20 12:25 评论0 收藏0
JS打包工具rollup——完全入门指南

摘要：使用进行模块化打包在之前打包的过程中，命令行中输出了一行，这表示并没有收到任何模块化的格式指令，因此会用默认的模块标准来对文件进行打包。前言最近在做一个提供给浏览器和node同时使用的js的url模板工具类，在用什么打包工具上纠结了一段时间，正好有一天在知乎上看到了关于rollup的介绍，在自己试了试之后，就决定用rollup.js来打包自己的工具类了。这篇文章主要是为了让对ro...

dreamtecher 2019-08-21 11:53 评论0 收藏0
Webpack vs Rollup

摘要：年月份的时候，将的构建工具换成了。的特点代码分割有两种组织模块依赖的方式，同步和异步。而目前在中大型项目中使用得非常广泛。更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区本文由作者余伯贤授权网易云社区发布。 2017年4月份的时候，Facebook将React的构建工具换成了Rollup。很多人就有疑问了，Webpack不也是Facebook团队开发的吗，为什么不使用...

Null 2019-06-28 11:05 评论0 收藏0
Rollup 试炼之路

摘要：根据官网的解释，是下一代模块化工具。之后，模块化的写法将更加的趋势化，我们会将以前的文件切割成多个的细小模块。从的人数上，还是持有很大的保留意见的，所有我个人可能会在一些小型或者快速项目中做尝试而已。最近看到挺多次 Rollup 这个词，再也架不住好奇，简单的学习实践了一下。完整项目库地址请戳。 PS: ES6 对应 ES2015，请忽略这些细节。什么是 Rollup Rollup...

qc1iu 2019-08-22 11:00 评论0 收藏0