javascript - How can I use babel-polyfill for multiple separated entriesoutputs? - Stack Overflow

admin管理员组

文章数量:1022956

I have this in my webpack.config.js to create two different outputs from two sources:

module.exports = {
  entry: {
    'dist/index.js': ['babel-polyfill', './src/Component.jsx'],
    'example/bundle.js': ['babel-polyfill', './src/Page.jsx'],
  },
  output: {
    path: './',
    filename: '[name]',
  },
  ...

Compiling it with webpack works just fine, but if I load index.js in a browser I get this error:

Uncaught Error: only one instance of babel-polyfill is allowed

I need babel-polyfill for both outputs. What can I do?

I have this in my webpack.config.js to create two different outputs from two sources:

module.exports = {
  entry: {
    'dist/index.js': ['babel-polyfill', './src/Component.jsx'],
    'example/bundle.js': ['babel-polyfill', './src/Page.jsx'],
  },
  output: {
    path: './',
    filename: '[name]',
  },
  ...

Compiling it with webpack works just fine, but if I load index.js in a browser I get this error:

Uncaught Error: only one instance of babel-polyfill is allowed

I need babel-polyfill for both outputs. What can I do?

• javascript
• webpack
• babeljs
• babel-polyfill

Share Improve this question Follow asked Sep 6, 2016 at 4:06 RotaretiRotareti 54.1k2424 gold badges120120 silver badges115115 bronze badges 2

• Could you clarify why specifically you want it in both entry points? It's pretty large, you really don't want to be loading it twice without a really good reason. – loganfsmyth Commented Sep 6, 2016 at 7:12
• 1 Sure! I want to create a react ponent as a npm package (dist/index.js). In order to develop the ponent in isolation, I created a small page (example/bundle.js), which loads the ponent and displays the result. When I work on the ponent I can see the results in the browser on that little page. The overhead wouldn't be a problem because the code remains small in most cases. – Rotareti Commented Sep 6, 2016 at 11:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

When developing a library (as opposed to an application), the Babel team does not remend including babel-polyfill in your library. We remend either:

1. Assume the ES6 globals are present, thus you'd instruct your library users to load babel-polyfill in their own codebase.
2. Use babel-runtime by enabling babel-plugin-transform-runtime, which attempts to analyze your code to figure out what ES6 library functionality you are using, then rewrites the code to load the polyfilled logic from babel-runtime instead of from the global scope. One downside of this approach is that it has no way to polyfill new .prototype methods like Array.prototype.find since it can't know if foo.find is an array.

So my remendation would be to remove babel-polyfill from your dist/index.js bundle entirely.

Use idempotent-babel-polyfill

import 'idempotent-babel-polyfill';

https://github./codejamninja/idempotent-babel-polyfill

I have this in my webpack.config.js to create two different outputs from two sources:

module.exports = {
  entry: {
    'dist/index.js': ['babel-polyfill', './src/Component.jsx'],
    'example/bundle.js': ['babel-polyfill', './src/Page.jsx'],
  },
  output: {
    path: './',
    filename: '[name]',
  },
  ...

Compiling it with webpack works just fine, but if I load index.js in a browser I get this error:

Uncaught Error: only one instance of babel-polyfill is allowed

I need babel-polyfill for both outputs. What can I do?

I have this in my webpack.config.js to create two different outputs from two sources:

module.exports = {
  entry: {
    'dist/index.js': ['babel-polyfill', './src/Component.jsx'],
    'example/bundle.js': ['babel-polyfill', './src/Page.jsx'],
  },
  output: {
    path: './',
    filename: '[name]',
  },
  ...

Compiling it with webpack works just fine, but if I load index.js in a browser I get this error:

Uncaught Error: only one instance of babel-polyfill is allowed

I need babel-polyfill for both outputs. What can I do?

• javascript
• webpack
• babeljs
• babel-polyfill

Share Improve this question Follow asked Sep 6, 2016 at 4:06 RotaretiRotareti 54.1k2424 gold badges120120 silver badges115115 bronze badges 2

• Could you clarify why specifically you want it in both entry points? It's pretty large, you really don't want to be loading it twice without a really good reason. – loganfsmyth Commented Sep 6, 2016 at 7:12
• 1 Sure! I want to create a react ponent as a npm package (dist/index.js). In order to develop the ponent in isolation, I created a small page (example/bundle.js), which loads the ponent and displays the result. When I work on the ponent I can see the results in the browser on that little page. The overhead wouldn't be a problem because the code remains small in most cases. – Rotareti Commented Sep 6, 2016 at 11:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

When developing a library (as opposed to an application), the Babel team does not remend including babel-polyfill in your library. We remend either:

1. Assume the ES6 globals are present, thus you'd instruct your library users to load babel-polyfill in their own codebase.
2. Use babel-runtime by enabling babel-plugin-transform-runtime, which attempts to analyze your code to figure out what ES6 library functionality you are using, then rewrites the code to load the polyfilled logic from babel-runtime instead of from the global scope. One downside of this approach is that it has no way to polyfill new .prototype methods like Array.prototype.find since it can't know if foo.find is an array.

So my remendation would be to remove babel-polyfill from your dist/index.js bundle entirely.

Use idempotent-babel-polyfill

import 'idempotent-babel-polyfill';

https://github./codejamninja/idempotent-babel-polyfill

本文标签： javascriptHow can I use babelpolyfill for multiple separated entriesoutputsStack Overflow