Last active
April 7, 2019 06:59
-
-
Save Finesse/d62339342a601182fd8935689ec827aa to your computer and use it in GitHub Desktop.
Babel gentleman setup. Adds only the transforms and polyfills that are required by the browsers you support. Each file is a setup for a different use case.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Setup for using only Babel. It produces a file which require()s Babel helpers (ok for Node.js environment). | |
NPM dependencies (check the output file to know which of them are really required): | |
core-js ^3 | |
@babel/runtime ^7.4 | |
NPM dev-dependencies: | |
@babel/core ^7.4 | |
@babel/plugin-transform-runtime ^7.4 | |
@babel/preset-env ^7.4 | |
*/ | |
const {writeFile} = require('fs'); | |
const {promisify} = require('util'); | |
const babel = require('@babel/core'); | |
(async () => { | |
const {code} = await babel.transformFileAsync('./src/app.js', { | |
presets: [ | |
['@babel/preset-env', { | |
targets: { | |
browsers: ['last 2 years', '> 1%'] // The browsers you support in the Browserlist format: https://github.com/browserslist/browserslist | |
}, | |
useBuiltIns: 'usage', | |
corejs: 3 | |
}] | |
], | |
plugins: [ | |
['@babel/plugin-transform-runtime', { | |
regenerator: false // Both env and runtime plugins insert a regenerator runtime (and often different ones). The most reliable way to avoid it is to turn it off in one of the plugins. | |
}] | |
], | |
sourceMaps: 'inline' // Remove the line to turn off | |
}); | |
await promisify(writeFile)('./dist/app.js', code); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Setup for using Babel with Rollup. It produces a file which require()s Babel helpers (ok for Node.js environment). | |
NPM dependencies (check the output file to know which of them are really required): | |
core-js ^3 | |
@babel/runtime ^7.4 | |
NPM dev-dependencies: | |
@babel/core ^7.4 | |
@babel/plugin-transform-runtime ^7.4 | |
@babel/preset-env ^7.4 | |
rollup ^1 | |
rollup-plugin-babel ^4 | |
rollup-plugin-commonjs ^9 | |
rollup-plugin-node-resolve ^3 | |
*/ | |
const rollup = require('rollup'); | |
const rollupBabel = require('rollup-plugin-babel'); | |
const rollupCommonJS = require('rollup-plugin-commonjs'); | |
const rollupNodeResolve = require('rollup-plugin-node-resolve'); | |
(async () => { | |
const bundle = await rollup.rollup({ | |
input: './src/app.js', | |
plugins: [ | |
// Adds a possibility to import packages from node_modules and files with an extension != .js | |
rollupNodeResolve({ | |
browser: true, | |
extensions: ['.js', '.json'] | |
}), | |
// Transpiles the future JS | |
rollupBabel({ | |
exclude: 'node_modules/**', | |
runtimeHelpers: true, | |
presets: [ | |
['@babel/preset-env', { | |
targets: { | |
browsers: ['last 2 years', '> 1%'] // The browsers you support in the Browserlist format: https://github.com/browserslist/browserslist | |
}, | |
useBuiltIns: 'usage', | |
corejs: 3 | |
}] | |
], | |
plugins: [ | |
['@babel/plugin-transform-runtime', { | |
regenerator: false // Both env and runtime plugins insert a regenerator runtime (and often different ones). The most reliable way to avoid it is to turn it off in one of the plugins. | |
}] | |
] | |
}), | |
// Add a posibility to import packages written in CommonJS style | |
// Must come after the Babel plugin to avoid the problem: https://github.com/rollup/rollup-plugin-commonjs/issues/247#issuecomment-370677203 | |
rollupCommonJS() | |
], | |
external: module => ['core-js', 'regenerator-runtime'].some(externalModule => { | |
return module === externalModule || module.startsWith(`${externalModule}/`); | |
}) | |
}); | |
await bundle.write({ | |
format: 'cjs', | |
file: './dist/app.js', | |
sourcemap: 'inline' // Remove the line to turn off | |
}); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Setup for using Babel with Rollup. It produces a file which is ready to use in a browser. | |
NPM dev-dependencies: | |
@babel/core ^7.4 | |
@babel/plugin-transform-runtime ^7.4 | |
core-js ^3 | |
@babel/preset-env ^7.4 | |
@babel/runtime ^7.4 | |
rollup ^1 | |
rollup-plugin-babel ^4 | |
rollup-plugin-commonjs ^9 | |
rollup-plugin-node-resolve ^3 | |
*/ | |
const rollup = require('rollup'); | |
const rollupBabel = require('rollup-plugin-babel'); | |
const rollupCommonJS = require('rollup-plugin-commonjs'); | |
const rollupNodeResolve = require('rollup-plugin-node-resolve'); | |
(async () => { | |
const bundle = await rollup.rollup({ | |
input: './src/app.js', | |
plugins: [ | |
// Adds a possibility to import packages from node_modules and files with an extension != .js | |
rollupNodeResolve({ | |
browser: true, | |
extensions: ['.js', '.json'] | |
}), | |
// Transpiles the future JS | |
rollupBabel({ | |
exclude: 'node_modules/**', | |
runtimeHelpers: true, | |
presets: [ | |
['@babel/preset-env', { | |
targets: { | |
browsers: ['last 2 years', '> 1%'] // The browsers you support in the Browserlist format: https://github.com/browserslist/browserslist | |
}, | |
useBuiltIns: 'usage', | |
corejs: 3 | |
}] | |
], | |
plugins: [ | |
// If the transform-runtime plugin is not used, the Babel runtime code won't be shared between your code and the code from node_modules | |
['@babel/plugin-transform-runtime', { | |
regenerator: false // Both env and runtime plugins insert a regenerator runtime (and often different ones). It leads to an increased bundle size. The most reliable way to avoid it is to turn it off in one of the plugins. | |
}] | |
] | |
}), | |
// Add a posibility to import packages written in CommonJS style | |
// Must come after the Babel plugin to avoid the problem: https://github.com/rollup/rollup-plugin-commonjs/issues/247#issuecomment-370677203 | |
rollupCommonJS() | |
] | |
}); | |
await bundle.write({ | |
format: 'umd', | |
file: './dist/app.js', | |
name: 'MyApp', | |
sourcemap: 'inline' // Remove the line to turn off | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment