├── .github └── workflows │ └── publish.yaml ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── entry ├── all.js ├── classic.js ├── es.js └── stable.js ├── index.js └── package.json /.github/workflows/publish.yaml: -------------------------------------------------------------------------------- 1 | name: Publish NPM Package 2 | on: 3 | release: 4 | types: [created] 5 | workflow_dispatch: 6 | jobs: 7 | Publish: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v2 11 | - uses: actions/setup-node@v2 12 | with: 13 | node-version: '12.x' 14 | - run: npm install 15 | - uses: JS-DevTools/npm-publish@v1 16 | with: 17 | token: ${{ secrets.NPM_TOKEN }} 18 | access: 'public' 19 | dry-run: false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /.github 2 | /.idea -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Scott Charlesworth 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | NPM 3 | NPM 4 | NPM 5 |

6 | 7 | # Laravel Mix Polyfill 8 | 9 | A Laravel Mix extension to include polyfills by using [Babel](https://babeljs.io/), [core-js](https://github.com/zloirock/core-js), and [regenerator-runtime](https://github.com/facebook/regenerator/tree/master/packages/regenerator-runtime). 10 | 11 | ## Usage 12 | 13 | First, install the extension. 14 | 15 | ``` 16 | npm install laravel-mix-polyfill --save-dev 17 | ``` 18 | 19 | or 20 | 21 | ``` 22 | yarn add laravel-mix-polyfill --dev 23 | ``` 24 | 25 | Then, require it within your `webpack.mix.js` file: 26 | 27 | ```js 28 | let mix = require('laravel-mix'); 29 | 30 | require('laravel-mix-polyfill'); 31 | 32 | mix.js('resources/js/app.js', 'public/js') 33 | .sass('resources/sass/app.scss', 'public/css') 34 | .polyfill({ 35 | enabled: true, 36 | useBuiltIns: "usage", 37 | targets: "firefox 50, IE 11" 38 | }); 39 | ``` 40 | 41 | ## Options 42 | 43 | | Name | Type | Default | Description | 44 | | ----------- | ----------------------------- | ------------ | ------------- | 45 | | enabled | `boolean` | `true` | Should polyfill be used. | 46 | | useBuiltIns | `string` | `"usage"` | [See here](https://babeljs.io/docs/en/babel-preset-env#usebuiltins) for detailed description. Possible values are:
• `"usage"`
• `"entry"`
• `false` | 47 | | targets | `string`, `boolean` | `"defaults"` | Allows a target (browser) environment to be specified. This can either be:
• a [browserslist-compatible](https://github.com/ai/browserslist) query (`"> 0.25%, not dead"`),
• or `false` to transform all ECMAScript 2015+ code by default.

• Setting to `false` will also allow use of browserslist config sources (like .browserslistrc). See [here](https://babeljs.io/docs/en/babel-preset-env#browserslist-integration) and [here](https://github.com/browserslist/browserslist#queries) for more information.

You can test string values on [browserl.ist](https://browserl.ist/). | 48 | | entryPoints | `string`, `boolean` | `"stable"` | Used when `useBuiltIns` is set to `"entry"`. See below for possible values. | 49 | | corejs | `number` | `3` | The version of core-js to be used. | 50 | | debug | `boolean` | `false` | Outputs the targets/plugins used to the console. | 51 | 52 | ### Entry Points 53 | 54 | In `core-js@3` the entry points were changed to [allow for more flexibility](https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#packages-entry-points-and-modules-names). 55 | 56 | The following common presets have been included for ease, and will be inserted into the entry point for you automatically. `"stable"` has been set as the default [as it is a full equal](https://github.com/zloirock/core-js/blob/master/README.md#babelpolyfill) of the now deprecated `@babel/polyfill` package which was used previously. 57 | 58 | | Value | Description | 59 | | -------------- | ------------- | 60 | | **`"stable"`** | Polyfill only stable `core-js` features - ES and web standards. | 61 | | `"all"` | Polyfill all `core-js` features. | 62 | | `"es"` | Polyfill only stable ES features. | 63 | | `"classic"` | Imports copied from the latest `@babel/polyfill` package (before it was deprecated). | 64 | | `false` | Do not use a preset (you will need to add your own imports to the top of your entry point). | -------------------------------------------------------------------------------- /entry/all.js: -------------------------------------------------------------------------------- 1 | // Polyfill all `core-js` features 2 | import "core-js"; 3 | import "regenerator-runtime/runtime"; -------------------------------------------------------------------------------- /entry/classic.js: -------------------------------------------------------------------------------- 1 | // Cover all standardized ES6 APIs. 2 | import "core-js/es6"; 3 | 4 | // Standard now 5 | import "core-js/fn/array/includes"; 6 | import "core-js/fn/array/flat-map"; 7 | import "core-js/fn/string/pad-start"; 8 | import "core-js/fn/string/pad-end"; 9 | import "core-js/fn/string/trim-start"; 10 | import "core-js/fn/string/trim-end"; 11 | import "core-js/fn/symbol/async-iterator"; 12 | import "core-js/fn/object/get-own-property-descriptors"; 13 | import "core-js/fn/object/values"; 14 | import "core-js/fn/object/entries"; 15 | import "core-js/fn/promise/finally"; 16 | 17 | // Ensure that we polyfill ES6 compat for anything web-related, if it exists. 18 | import "core-js/web"; 19 | 20 | import "regenerator-runtime/runtime"; -------------------------------------------------------------------------------- /entry/es.js: -------------------------------------------------------------------------------- 1 | // Polyfill only stable ES features: 2 | import "core-js/es"; 3 | import "regenerator-runtime/runtime"; -------------------------------------------------------------------------------- /entry/stable.js: -------------------------------------------------------------------------------- 1 | // Polyfill only stable `core-js` features - ES and web standards 2 | import "core-js/stable"; 3 | import "regenerator-runtime/runtime"; -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const mix = require('laravel-mix'); 2 | 3 | class Polyfill { 4 | dependencies() { 5 | return ['core-js', 'regenerator-runtime']; 6 | } 7 | 8 | register(config) { 9 | this.config = Object.assign({ 10 | enabled: true, 11 | useBuiltIns: "usage", 12 | targets: "defaults", 13 | entryPoints: "stable", 14 | corejs: 3, 15 | debug: false, 16 | }, config); 17 | } 18 | 19 | webpackConfig(webpackConfig) { 20 | if ((this.config.enabled === true) 21 | && (this.config.useBuiltIns === "entry") 22 | && (this.config.entryPoints !== false)) { 23 | Object.entries(webpackConfig.entry).forEach(v => { 24 | webpackConfig.entry[v[0]].unshift("laravel-mix-polyfill/entry/" 25 | + this.config.entryPoints 26 | + ".js"); 27 | }); 28 | } 29 | 30 | if ((this.config.enabled === true) && (typeof this.config.targets === "string")) { 31 | webpackConfig.target = 'browserslist:' + this.config.targets; 32 | } 33 | 34 | if (this.config.debug === true) { 35 | let javascriptIndex = null; 36 | 37 | webpackConfig.module.rules.forEach(function (value, index) { 38 | if (value['test'].toString() === '/\\.(cjs|mjs|jsx?|tsx?)$/') { 39 | javascriptIndex = index; 40 | } 41 | }); 42 | 43 | if (javascriptIndex) { 44 | webpackConfig.module.rules[javascriptIndex]['use'][0]['options']['cacheDirectory'] = false; 45 | } 46 | } 47 | } 48 | 49 | babelConfig() { 50 | let polyfillPresets = { 51 | "useBuiltIns": this.config.useBuiltIns, 52 | }; 53 | 54 | if (this.config.useBuiltIns !== false) { 55 | polyfillPresets.corejs = this.config.corejs; 56 | } 57 | 58 | if (this.config.targets) { 59 | polyfillPresets.targets = this.config.targets; 60 | } 61 | 62 | if (this.config.debug) { 63 | polyfillPresets.debug = this.config.debug; 64 | } 65 | 66 | let returnObject = { 67 | presets: [ 68 | [ 69 | '@babel/preset-env', 70 | polyfillPresets 71 | ] 72 | ], 73 | }; 74 | 75 | return this.config.enabled ? returnObject : {}; 76 | } 77 | } 78 | 79 | mix.extend('polyfill', new Polyfill()); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "laravel-mix-polyfill", 3 | "version": "3.0.1", 4 | "homepage": "https://github.com/scottcharlesworth/laravel-mix-polyfill#readme", 5 | "description": "A Laravel Mix extension to include polyfills by using Babel, core-js, and regenerator-runtime", 6 | "main": "index.js", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/scottcharlesworth/laravel-mix-polyfill.git" 10 | }, 11 | "keywords": [ 12 | "laravel", 13 | "laravel mix", 14 | "mix", 15 | "polyfill", 16 | "babel", 17 | "webpack" 18 | ], 19 | "author": { 20 | "name": "Scott Charlesworth" 21 | }, 22 | "bugs": { 23 | "url": "https://github.com/scottcharlesworth/laravel-mix-polyfill/issues" 24 | }, 25 | "license": "MIT", 26 | "dependencies": { 27 | "core-js": "^2.6.9 || ^3.1.4", 28 | "regenerator-runtime": "^0.13.2" 29 | }, 30 | "peerDependencies": { 31 | "laravel-mix": "^6.0.0" 32 | } 33 | } 34 | --------------------------------------------------------------------------------