How to build a component library using TypeScript, Ant Design and Rollup
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm trying to create an example boilerplate for a library of reusable components in TypeScript, using Ant Design for UI elements and Rollup for bundling.
The Ant Design documentation although useful, doesn't give specific details for configuring Rollup and I've not had any luck finding an example using the same technology stack.
Using information from various online sources I've put together an outline boilerplate and published it to the following GitHub repository
However, the build output is showing a number of warnings from Rollup relating to rewriting references to 'this'. Can anyone suggest changes to my build config to resolve this issue?
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en#error-this-is-undefined
node_modulesantdesaffixindex.js
6: import _inherits from "babel-runtime/helpers/inherits";
7: import _typeof from "babel-runtime/helpers/typeof";
8: var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
^
9: var c = arguments.length,
10: r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
...
javascript reactjs typescript antd rollup
asked Nov 16 '18 at 12:55
SteveSteve
13
add a comment |
I'm trying to create an example boilerplate for a library of reusable components in TypeScript, using Ant Design for UI elements and Rollup for bundling.
The Ant Design documentation although useful, doesn't give specific details for configuring Rollup and I've not had any luck finding an example using the same technology stack.
Using information from various online sources I've put together an outline boilerplate and published it to the following GitHub repository
However, the build output is showing a number of warnings from Rollup relating to rewriting references to 'this'. Can anyone suggest changes to my build config to resolve this issue?
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en#error-this-is-undefined
node_modulesantdesaffixindex.js
6: import _inherits from "babel-runtime/helpers/inherits";
7: import _typeof from "babel-runtime/helpers/typeof";
8: var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
^
9: var c = arguments.length,
10: r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
...
javascript reactjs typescript antd rollup
asked Nov 16 '18 at 12:55
SteveSteve
13
Please include the relevant parts of your code in the question
– MTCoster
Nov 16 '18 at 13:06
Improved the question and trimmed the error logs. Please let me know if there are any further changes which you would like to see.
– Steve
Nov 16 '18 at 13:41
Thanks for posting the repository. I spent some time trying to get your project to work and made progress but got discouraged by Rollup's requirement that the exports of each module be specified in the configuration file if they can't be detected automatically (see this issue). Why do you want to use Rollup?
– Matt McCutchen
Nov 17 '18 at 0:36
Hi, thanks for taking the time to look at this. Probably worth saying that I'm not opposed to other bundling solutions (e.g. webpack) but Rollup seems to be the preferred option for building libraries of reusable components.
– Steve
Nov 19 '18 at 8:13
To make a stronger case for Rollup, a key requirement is to enable tree shaking of unused components. This requires ES6 (ES2015) modules link. Rollup produces ES6 modules by default. Webpack is unable to output ES6 currently. link
– Steve
Dec 3 '18 at 13:48
add a comment |
I'm trying to create an example boilerplate for a library of reusable components in TypeScript, using Ant Design for UI elements and Rollup for bundling.
The Ant Design documentation although useful, doesn't give specific details for configuring Rollup and I've not had any luck finding an example using the same technology stack.
Using information from various online sources I've put together an outline boilerplate and published it to the following GitHub repository
However, the build output is showing a number of warnings from Rollup relating to rewriting references to 'this'. Can anyone suggest changes to my build config to resolve this issue?
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en#error-this-is-undefined
node_modulesantdesaffixindex.js
6: import _inherits from "babel-runtime/helpers/inherits";
7: import _typeof from "babel-runtime/helpers/typeof";
8: var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
^
9: var c = arguments.length,
10: r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
...
javascript reactjs typescript antd rollup
asked Nov 16 '18 at 12:55
SteveSteve
13
I'm trying to create an example boilerplate for a library of reusable components in TypeScript, using Ant Design for UI elements and Rollup for bundling.
The Ant Design documentation although useful, doesn't give specific details for configuring Rollup and I've not had any luck finding an example using the same technology stack.
Using information from various online sources I've put together an outline boilerplate and published it to the following GitHub repository
However, the build output is showing a number of warnings from Rollup relating to rewriting references to 'this'. Can anyone suggest changes to my build config to resolve this issue?
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en#error-this-is-undefined
node_modulesantdesaffixindex.js
6: import _inherits from "babel-runtime/helpers/inherits";
7: import _typeof from "babel-runtime/helpers/typeof";
8: var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
^
9: var c = arguments.length,
10: r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
...
javascript reactjs typescript antd rollup
javascript reactjs typescript antd rollup
asked Nov 16 '18 at 12:55
SteveSteve
13
asked Nov 16 '18 at 12:55
SteveSteve
13
edited Nov 16 '18 at 13:39
Steve
asked Nov 16 '18 at 12:55
SteveSteve
13
asked Nov 16 '18 at 12:55
SteveSteve
13
asked Nov 16 '18 at 12:55
SteveSteve
13
13
Please include the relevant parts of your code in the question
– MTCoster
Nov 16 '18 at 13:06
Improved the question and trimmed the error logs. Please let me know if there are any further changes which you would like to see.
– Steve
Nov 16 '18 at 13:41
Thanks for posting the repository. I spent some time trying to get your project to work and made progress but got discouraged by Rollup's requirement that the exports of each module be specified in the configuration file if they can't be detected automatically (see this issue). Why do you want to use Rollup?
– Matt McCutchen
Nov 17 '18 at 0:36
Hi, thanks for taking the time to look at this. Probably worth saying that I'm not opposed to other bundling solutions (e.g. webpack) but Rollup seems to be the preferred option for building libraries of reusable components.
– Steve
Nov 19 '18 at 8:13
To make a stronger case for Rollup, a key requirement is to enable tree shaking of unused components. This requires ES6 (ES2015) modules link. Rollup produces ES6 modules by default. Webpack is unable to output ES6 currently. link
– Steve
Dec 3 '18 at 13:48
add a comment |
Please include the relevant parts of your code in the question
– MTCoster
Nov 16 '18 at 13:06
Improved the question and trimmed the error logs. Please let me know if there are any further changes which you would like to see.
– Steve
Nov 16 '18 at 13:41
Thanks for posting the repository. I spent some time trying to get your project to work and made progress but got discouraged by Rollup's requirement that the exports of each module be specified in the configuration file if they can't be detected automatically (see this issue). Why do you want to use Rollup?
– Matt McCutchen
Nov 17 '18 at 0:36
Hi, thanks for taking the time to look at this. Probably worth saying that I'm not opposed to other bundling solutions (e.g. webpack) but Rollup seems to be the preferred option for building libraries of reusable components.
– Steve
Nov 19 '18 at 8:13
To make a stronger case for Rollup, a key requirement is to enable tree shaking of unused components. This requires ES6 (ES2015) modules link. Rollup produces ES6 modules by default. Webpack is unable to output ES6 currently. link
– Steve
Dec 3 '18 at 13:48
Please include the relevant parts of your code in the question
– MTCoster
Nov 16 '18 at 13:06
Please include the relevant parts of your code in the question
– MTCoster
Nov 16 '18 at 13:06
Improved the question and trimmed the error logs. Please let me know if there are any further changes which you would like to see.
– Steve
Nov 16 '18 at 13:41
Improved the question and trimmed the error logs. Please let me know if there are any further changes which you would like to see.
– Steve
Nov 16 '18 at 13:41
Thanks for posting the repository. I spent some time trying to get your project to work and made progress but got discouraged by Rollup's requirement that the exports of each module be specified in the configuration file if they can't be detected automatically (see this issue). Why do you want to use Rollup?
– Matt McCutchen
Nov 17 '18 at 0:36
Thanks for posting the repository. I spent some time trying to get your project to work and made progress but got discouraged by Rollup's requirement that the exports of each module be specified in the configuration file if they can't be detected automatically (see this issue). Why do you want to use Rollup?
– Matt McCutchen
Nov 17 '18 at 0:36
Hi, thanks for taking the time to look at this. Probably worth saying that I'm not opposed to other bundling solutions (e.g. webpack) but Rollup seems to be the preferred option for building libraries of reusable components.
– Steve
Nov 19 '18 at 8:13
Hi, thanks for taking the time to look at this. Probably worth saying that I'm not opposed to other bundling solutions (e.g. webpack) but Rollup seems to be the preferred option for building libraries of reusable components.
– Steve
Nov 19 '18 at 8:13
To make a stronger case for Rollup, a key requirement is to enable tree shaking of unused components. This requires ES6 (ES2015) modules link. Rollup produces ES6 modules by default. Webpack is unable to output ES6 currently. link
– Steve
Dec 3 '18 at 13:48
To make a stronger case for Rollup, a key requirement is to enable tree shaking of unused components. This requires ES6 (ES2015) modules link. Rollup produces ES6 modules by default. Webpack is unable to output ES6 currently. link
– Steve
Dec 3 '18 at 13:48
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53338345%2fhow-to-build-a-component-library-using-typescript-ant-design-and-rollup%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53338345%2fhow-to-build-a-component-library-using-typescript-ant-design-and-rollup%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please include the relevant parts of your code in the question
– MTCoster
Nov 16 '18 at 13:06
Improved the question and trimmed the error logs. Please let me know if there are any further changes which you would like to see.
– Steve
Nov 16 '18 at 13:41
Thanks for posting the repository. I spent some time trying to get your project to work and made progress but got discouraged by Rollup's requirement that the exports of each module be specified in the configuration file if they can't be detected automatically (see this issue). Why do you want to use Rollup?
– Matt McCutchen
Nov 17 '18 at 0:36
Hi, thanks for taking the time to look at this. Probably worth saying that I'm not opposed to other bundling solutions (e.g. webpack) but Rollup seems to be the preferred option for building libraries of reusable components.
– Steve
Nov 19 '18 at 8:13
To make a stronger case for Rollup, a key requirement is to enable tree shaking of unused components. This requires ES6 (ES2015) modules link. Rollup produces ES6 modules by default. Webpack is unable to output ES6 currently. link
– Steve
Dec 3 '18 at 13:48