ef4

Webpack 5 Node Polyfills Upgrade Cheatsheet

Webpack 4 automatically polyfilled many Node APIs in the browser. This was not a great system, because it could lead to surprisingly giant libraries getting pulled into your app by accident, and it gave you no control over the exact versions of the polyfills you were using.

So Webpack 5 removed this functionality. That means you need to make changes if you were relying on those polyfills. This is a quick reference for how to replace the most common patterns.

List of polyfill packages that were used in webpack 4

For each automatically-polyfilled node package name on the left, this shows the name of the NPM package that was used to polyfill it on the right. Under webpack 5 you can manually install these packages and use them via resolve.fallback.

codenamezjames

import VuexPersist from 'vuex-persist'
import Cookies from 'js-cookie'
export default ({ store, ssrContext }) => {
  // Cookie Store for user/auth (ssr ajax auth)
  const cookieModules = ['user']
  const startsWithCookieRegex = new RegExp(`^(${cookieModules.join('|')})/`)
  new VuexPersist({
    filter: mutation => startsWithCookieRegex.test(mutation.type),
    restoreState: key => {
      try {

luvuong-le

/**
 * -------------------------------------------------------------
 * 1. Removing Duplicates from an array
 * -------------------------------------------------------------
 * @description We make use of sets and create an array from a Set. Sets don't allow duplicates
 * @returns [1,2,3,1,2,3] -> [1,2,3]
 */

const duplicates = [1, 2, 3, 1, 2, 3];
const removedDuplicates = Array.from(new Set(duplicates));

uladzislau-stuk

The art of naming variables

Arrays

// bad
const fruit = ['apple', 'banana', 'cucumber']

// okay
const fruitArr = ['apple', 'banana', 'cucumber']

// good

yann-yinn

<!--
If you really like to use apolloClient declaratively, here is a naive implementation
of a custom 'ApolloQuery' component
-->
<template>
  <div>
    <slot name="result" :result="this.result" />
  </div>
</template>

anthonybrown

/*! = $rembase: 14px
--------------------------------------------------------------
* hmtl { font-size: 87.5%; }
* body { font-size: 14px; font-size: 1rem; line-height: 1; }
* 4px    	0.28571429rem
* 8px		0.571428571rem
* 12px		0.857142857rem
* 13px		0.928571429rem
* 14px		1rem
* 16px		1.142857143rem

jeromecoupe

"use strict";

// Load plugins
const autoprefixer = require("autoprefixer");
const browsersync = require("browser-sync").create();
const cp = require("child_process");
const cssnano = require("cssnano");
const del = require("del");
const eslint = require("gulp-eslint");
const gulp = require("gulp");

JacobBennett

Recently when refactoring a Vue 1.0 application, I utilized ES6 arrow functions to clean up the code and make things a bit more consistent before updating to Vue 2.0. Along the way I made a few mistakes and wanted to share the lessons I learned as well as offer a few conventions that I will be using in my Vue applications moving forward.

The best way to explain this is with an example so lets start there. I'm going to throw a rather large block of code at you here, but stick with me and we will move through it a piece at a time.

<script>

// require vue-resource...

new Vue({

ahtcx

// ⚠ IMPORTANT: this is old and doesn't work for many different edge cases but I'll keep it as-is for any of you want it
// ⚠ IMPORTANT: you can find more robust versions in the comments or use a library implementation such as lodash's `merge`

// Merge a `source` object to a `target` recursively
const merge = (target, source) => {
  // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties
  for (const key of Object.keys(source)) {
    if (source[key] instanceof Object) Object.assign(source[key], merge(target[key], source[key]))
  }

ourmaninamsterdam

The MIT License (MIT)

Copyright (c) 2015 Justin Perry

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions: