前端技术分享

const cacheName = 'my-app-v1';

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName).then(cache => cache.addAll([
      '/index.html',
      '/styles/main.css',
      '/scripts/app.js'
    ]))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

const cacheName = 'static-v1';

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cachedResponse => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request).then(networkResponse => {
        if (networkResponse.status === 200) {
          const responseClone = networkResponse.clone();
          caches.open(cacheName).then(cache => {
            cache.put(event.request, responseClone);
          });
        }
        return networkResponse;
      });
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(networkResponse => {
        const responseClone = networkResponse.clone();
        caches.open(cacheName).then(cache => cache.put(event.request, responseClone));
        return networkResponse;
      })
      .catch(() => caches.match(event.request))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open(cacheName).then(cache => {
      return cache.match(event.request).then(cachedResponse => {
        const networkFetch = fetch(event.request).then(networkResponse => {
          if (networkResponse.status === 200) {
            cache.put(event.request, networkResponse.clone());
          }
          return networkResponse;
        });
        return cachedResponse || networkFetch;
      });
    })
  );
});

self.addEventListener('activate', event => {
  const currentCaches = ['static-v2', 'dynamic-v1'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => !currentCaches.includes(name)).map(name => caches.delete(name))
      );
    })
  );
});

// workbox-config.js
module.exports = {
  runtimeCaching: [
    {
      urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'images-cache',
        expiration: {
          maxEntries: 60,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
        },
      },
    },
    {
      urlPattern: /^https?:\/\/(api|another)/,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'api-cache',
        networkTimeoutSeconds: 10,
      },
    },
  ],
};

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (success) {
    resolve(value)
  } else {
    reject(error)
  }
})

promise.then(value => {
  // 成功处理
}).catch(error => {
  // 失败处理
})

promise.catch(error => {
  // 处理错误
})

promise.finally(() => {
  // 总是执行
})

Promise.all([p1, p2, p3]).then(values => {
  // 所有 Promise 成功
})

Promise.race([p1, p2]).then(value => {
  // 第一个完成
})

Promise.allSettled([p1, p2]).then(results => {
  // 所有完成，无论成功失败
})

async function asyncFunction() {
  try {
    const value = await promise
    return value
  } catch (error) {
    throw error
  }
}

// Promise
promise
  .then(() => { throw new Error('error') })
  .catch(error => console.error(error))

// async/await
async function func() {
  try {
    await promise
  } catch (error) {
    console.error(error)
  }
}

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional']
};

// .prettierrc
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

// .prettierignore
node_modules/
dist/
*.min.js

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  rules: {
    'no-unused-vars': 'error',
    'no-console': 'warn'
  }
};

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        browsers: ['> 1%', 'last 2 versions']
      }
    }]
  ]
};

module.exports = {
  plugins: [
    '@babel/plugin-transform-arrow-functions',
    '@babel/plugin-transform-template-literals'
  ]
};

module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

import { terser } from 'rollup-plugin-terser';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    terser()
  ]
};

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  }
};

import('./module.js').then(module => {
  // 使用模块
});

output: {
  filename: '[name].[contenthash].js'
}

optimization: {
  runtimeChunk: 'single'
}

optimization: {
  minimize: true,
  minimizer: [new TerserPlugin()]
}

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin()
    ]
  }
};

module.exports = {
  mode: 'production', // 自动启用
  optimization: {
    usedExports: true
  }
};

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

externals: {
  jquery: 'jQuery'
}

const root = document.documentElement;
root.style.setProperty('--primary-color', 'green');