browserify / browserify/browserify
Cherrypicking from core-js module (via require) when bundling & transforming
- Dominant language
- JavaScript
- Stars
- 14.7k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
I have a problem of which I am not able to figure out a proper approach. I am using browserify to bundle js files and minify it by using a cmd script. You can see the directory as
```
.
|-- browserify
|-- bundler.js
|-- node_modules**
\-- package.json
|-- project1
|-- script.min.js
|-- script1.js
|-- script2.js
...
\-- projectN
|-- script.min.js
|-- script1.js
\-- script2.js
```
with the script. This is a simple example. Each project consists of multiple directories with their own script files and dependencies. But the end result should appear as what you see. I'm using `bundler.js` to bundle dedicated javascript files in a given project X folder (or just all when deploying). I then use [babelify](https://github.com/babel/babelify) to transform each file before generating a bundle. Then I minify it. End result: `script.min.js`. It all works fine. There is always a `script1.js` which is used as "configuration" script.
However the problem is that I have to provide a polyfill for some ES6 features that is being used in some script files. For that, I'm using [core-js](https://github.com/zloirock/core-js) which is installed in the same directory as browserify.(folder **)
Instead of picking the whole polyfill script, I want to cherry-pick it. For example, if a script only uses `Array.from`. It is not supported in IE. So, when deploying to a test environment once the initial script is developed, I would add a polyfill of that to a production script to be tested. So that our testers can use it on their browsers, even IE. To add the polyfill, I have in `script1.js` the following:
```js
if (typeof PROD !== 'undefined') {
require('core-js/library/fn/array/from');
// other requirements + globals (some HTML pages have onclick="foo()" attributes ... )
}
```
where `PROD` is being defined when compressing the file. This of course does not work. One option is to use
```js
// bundler.js (b = browserify)
b.require('core-js/library/fn/array/from', {expose: 'ArrayFrom'})
// script1.js
if (typeof PROD !== 'undefined') {
require('ArrayFrom');
}
```
Sadly, it doesn't work well and would be a maintenance hell if I have to control lots of those polyfills. (not only Array functions, but also Promises, Set, ...). It also include everything that is being "required", even if there is no Array.from use in the script.
Currently, after checking the handbook; I have figured out an approach:
```js
b.external('core-js/library/fn/array/from')
.external('core-js/library/fn/array/every')
// script1.js
if (typeof PROD !== 'undefined') {
require('core-js/library/fn/array/from');
}
```
Which works well. But even then, I have there a list of "externals" ... It is also sorta anti-pattern.
Is there a better approach for this? If so, can you give me some pointers?
I have also checked [browserify-shim](https://www.npmjs.com/package/browserify-shim) but that is not something I want.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.