- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试创建一个组件库 wie rollup 和 Vue,当其他人导入它时可以进行树摇动。我的设置如下:
package.json
的相关摘录
{
"name": "red-components-with-rollup",
"version": "1.0.0",
"sideEffects": false,
"main": "dist/lib.cjs.js",
"module": "dist/lib.esm.js",
"browser": "dist/lib.umd.js",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w"
},
"devDependencies": {
/* ... */
}
这是我的整个 rollup.config.js
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import vue from "rollup-plugin-vue";
import pkg from "./package.json";
export default {
input: "lib/index.js",
output: [
{
file: pkg.browser,
format: "umd",
name: "red-components"
},
{ file: pkg.main, format: "cjs" },
{ file: pkg.module, format: "es" }
],
plugins: [resolve(), commonjs(), vue()]
};
我有一个相当简单的项目结构,包含一个 index.js
文件和 2 个 Vue 组件:
root
∟ lib
∟ index.js
∟ components
∟ Anchor.vue
∟ Button.vue
∟ package.json
∟ rollup.config.js
我的 index.js
导入和导出 Vue 文件:
export { default as Anchor } from "./components/Anchor.vue";
export { default as Button } from "./components/Button.vue";
export default undefined;
如果我不执行 export default undefined;
任何导入我的库的应用都无法找到任何导出。很奇怪。
现在,当我创建另一个应用程序并像这样导入 red-components-with-rollup
时:
import { Anchor } from "red-components-with-rollup";
然后我从我的应用程序中打开 bundle,我还会在我的 bundle 中找到 Button.vue
的源代码,它还没有被删除为死代码。
我做错了什么?
最佳答案
ES格式的构建结果是什么?它是单个文件还是多个文件,类似于您的来源?
考虑到您的 Rollup 选项,我猜它会将所有内容捆绑到一个文件中,这很可能是它无法对其进行 tree-shaking 的原因。
为了让你的 ES 构建成多个文件,你应该改变:
{ file: pkg.module, format: "es" }
进入:
{
format: "es",
// Use a directory instead of a file as it will output multiple
dir: 'dist/esm'
// Keep a separate file for each module
preserveModules: true,
// Optionally strip useless path from source
preserveModulesRoot: 'lib',
}
您需要更新您的 package.json
以将 module
指向新的构建文件,例如 "module": "dist/esm/index.js”
。
关于javascript - 使用 rollup 创建一个 tree shakable 库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56775433/
以这张表为例(我们称之为BIN_TABLE): +------+------+ | A | B | +------+------+ | 0 | 0 | | 0 |
我的Rollup项目是这样的... // rollup.config.js import pkg from "./package.json"; import {getRollupServerConfi
每当我为生产而构建时,都会收到此警告。当我为生产而构建时,我在汇总输出配置中禁用了源映射。 output: [{ dir: "...", format: "...", sourcemap: isPro
1、Rollup 概述 官网地址:https://rollupjs.org/guide/en/ Rollup 是什么 我们先看看 Rollup 的作者 Rich Harr
我想使用现在可用的 vuejs3 测试版设置一个项目。我想把它编译成es模 block ,所以我不能使用webpack。 是否有可用的种子项目/指南来设置带有汇总的 vue3 以发出 es 模块包
在SQL Server中使用ROLLUP时,如何获取明细行上方的小计行? 这是您在使用 ROLLUP 时通常会得到的结果: Group Name
我在我的 repo 的某些文件中导入了一个绝对路径,并尝试将它与 rollup 捆绑在一起 我的导入,其中/api/是绝对路径: import * from '/api/myFile.js' 但是当我
我正在使用 ES6 导入并使用 Rollup 进行编译。 输出是单个捆绑文件。 可以将 Rollup 配置为生成文件对文件的转译结果吗? 这是我正在使用的当前配置,它显然会吐出一个文件。 gulp.
我对打包机和 rollup 还很陌生具体来说。在 rollup.config.js 中有条件地散列文件名的最佳方法是什么?在为生产构建时,同时保存 index.html引用新 .css和 .js散列版
我使用 group by 和 rollup 得到以下查询结果: Divison Department Section Employee Name Employee ID Hour
我有这个sql查询 Select Case When transfer.trf_type = 'c' then 'Transfer to own card' When transf
今天在这个问题上停留了一段时间,想知道有人能提出问题出在哪里吗?这是我的代码: select g.game_name, r.rental_id, sum(if(datediff(r.return_da
Mytable,其 ID 作为自动增量客户、日期和金额我想做一个汇总,将每个客户每天的金额相加我的意思是汇总按日期和客户分组我的结果应该是这样的: +---------+--------------+
我有一个 SQL 语句,它给出了工作债权人的列表。在图像中的示例中,两个债权人都属于同一份工作。所以在显示 TOTALS 的最后一行,作业数是 1,这是正确的,因为它是同一个作业。同样,表示 NotP
+----+-------+-------+ | id | style | color | +----+-------+-------+ | 1 | 1 | red | | 2 |
我正在尝试向我的 SELECT 查询中添加一些总计,但我正在努力了解为什么这不起作用: SELECT 客户,job_type,actual_value_fee FROM jo2细节 GROUP BY
下面是我正在写的查询,但由于某种原因,它在“ROLLUP”一词之后给我一个语法错误,红色的小波浪线在汇总后的“(”下面。 SELECT building, room_number, time_slot
我想将一个 .js 文件与 rollup 捆绑在一起,其中只有一个类定义。但汇总仅创建一个空的捆绑文件。当我在类定义之外添加一些代码时,这种情况会发生变化。这将创建一个空包: class MyElem
这是我的例子(mysql Ver 14.14 Distrib 5.7.21,适用于 Win64 (x86_64)) DROP TABLE IF EXISTS t_tt; CREATE TEMPORAR
当按多个字段分组时执行 WITH ROLLUP,MySQL 返回每个组的汇总行,以及总体摘要: CREATE TABLE test (name VARCHAR(50), number TINYINT)
我是一名优秀的程序员,十分优秀!