Skip to content

Commit

Permalink
build: Yarn v2 and ESM & CJS bundles (#114)
Browse files Browse the repository at this point in the history
  • Loading branch information
arthurfiorette authored Jan 13, 2022
1 parent be9d735 commit 4734c5f
Show file tree
Hide file tree
Showing 36 changed files with 10,996 additions and 6,015 deletions.
5 changes: 4 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,7 @@
/dist
/types
/ignore
/docs
/docs
/esm
/cjs
/umd
4 changes: 2 additions & 2 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ jobs:
cache: 'yarn'

- name: Install packages
run: yarn --prefer-offline
run: yarn install

- name: Lint
run: yarn lint
Expand All @@ -34,7 +34,7 @@ jobs:
run: yarn build

- name: ESCheck
run: yarn escheck
run: yarn check

- name: Publish to Codecov
uses: codecov/[email protected]
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/codeql.yml
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ jobs:
cache: 'yarn'

- name: Install packages
run: yarn --prefer-offline
run: yarn install

- name: Build
run: yarn build
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ jobs:
cache: 'yarn'

- name: Install packages
run: yarn --prefer-offline
run: yarn install

- name: Build
run: npm run build
Expand Down
23 changes: 17 additions & 6 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
# Javascript
coverage
node_modules

/umd
/cjs
/esm

dist
types
ignore
.vscode/settings.json
package-lock.json
coverage
# Random
/ignore
*.log

# Vscode
.vscode/*
!.vscode/launch.json

# Npm & Yarn
package-lock.json
.yarn/*
!.yarn/releases
!.yarn/plugins
6 changes: 4 additions & 2 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
!package.json
!tsconfig*.json

!/src/**
!/dist/**
!/umd/**
!/cjs/**
!/esm/**

!/examples/**
5 changes: 5 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,13 @@ node_modules
/ignore
/coverage
/dist
/umd
/cjs
/esm
/types
/tsconfig.json

.yarn

changelog.md
CHANGELOG.md
363 changes: 363 additions & 0 deletions .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

Large diffs are not rendered by default.

550 changes: 550 additions & 0 deletions .yarn/plugins/@yarnpkg/plugin-version.cjs

Large diffs are not rendered by default.

768 changes: 768 additions & 0 deletions .yarn/releases/yarn-3.1.1.cjs

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions .yarnrc

This file was deleted.

11 changes: 11 additions & 0 deletions .yarnrc.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
enableGlobalCache: true

nodeLinker: node-modules

plugins:
- path: .yarn/plugins/@yarnpkg/plugin-version.cjs
spec: '@yarnpkg/plugin-version'
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
spec: '@yarnpkg/plugin-interactive-tools'

yarnPath: .yarn/releases/yarn-3.1.1.cjs
18 changes: 18 additions & 0 deletions build/build.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
#!/usr/bin/env bash

# This script is used to build the project.
# It is intended to be run from the project's root directory.

echo "\nStarting build...\n"

rm -rf cjs/ esm/ umd/

echo "Target cleared...\n"

webpack --config build/webpack.config.js &
tsc -p build/tsconfig.cjs.json &
tsc -p build/tsconfig.esm.json &

wait

echo "\nBuild done!"
13 changes: 13 additions & 0 deletions build/check.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
#!/usr/bin/env bash

# This script is used to check the umd's ecmascript compatibility.
# It is intended to be run from the project's root directory.

echo "\nStarting checking...\n"

es-check es5 umd/es5.min.js &
es-check es6 umd/es6.min.js &

wait

echo "\nCheck done!"
9 changes: 9 additions & 0 deletions build/tsconfig.cjs.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"module": "CommonJS",
"target": "ES2017",
"outDir": "../cjs"
},
"include": ["../src"]
}
9 changes: 9 additions & 0 deletions build/tsconfig.esm.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"module": "ESNext",
"target": "ES2017",
"outDir": "../esm"
},
"include": ["../src"]
}
13 changes: 13 additions & 0 deletions build/tsconfig.umd.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"module": "ESNext", // webpack converts to UMD
"target": "ESNext",
"outDir": "../umd",

// No declaration
"declaration": false,
"declarationMap": false
},
"include": ["../src"]
}
75 changes: 75 additions & 0 deletions build/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
//@ts-check
/* eslint-disable @typescript-eslint/no-var-requires */

const path = require('path');
const TerserWebpackPlugin = require('terser-webpack-plugin');

const root = (...p) => path.resolve(__dirname, '..', ...p);

/**
* @param {{
* output: string;
* entry: string;
* esTarget: string;
* }} options
* @returns {import('webpack').Configuration}
*/
const config = ({ output, esTarget, entry }) => ({
mode: 'production',

entry: root('src', entry),

output: {
path: root(),
globalObject: `typeof self === 'undefined' ? this : self`,
filename: output + '.js',
sourceMapFilename: output + '.map',
library: {
type: 'umd',
name: 'AxiosCacheInterceptor'
},
chunkFormat: 'module'
},

target: esTarget,

resolve: {
extensions: ['.ts', '.js']
},

devtool: 'source-map',

module: {
rules: [
{
include: root('src'),
test: /\.(ts|js)$/,
loader: 'ts-loader',
options: {
configFile: root('build', 'tsconfig.umd.json'),
compilerOptions: {
target: esTarget
}
}
}
]
},

optimization: {
minimize: true,
minimizer: [new TerserWebpackPlugin({ parallel: true })]
}
});

module.exports = [
config({
esTarget: 'es2015', //es6
entry: 'index.ts',
output: 'umd/es6.min'
}),
config({
esTarget: 'es5',
entry: 'index.ts',
output: 'umd/es5.min'
})
];
1 change: 1 addition & 0 deletions docs/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/.yarn
40 changes: 26 additions & 14 deletions docs/pages/compiled-code.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,23 @@

## CommonJS

The code is compiled with `webpack` for ES2017+.
The code compiled with `CommonJS` is for ES2017+.

- `axios-cache-interceptor`: Redirects to `/dist/index.js`
- `axios-cache-interceptor/dist/index.js`: The main library file.
- `axios-cache-interceptor/dist/index.d.ts`: The Typescript definition file.

Every browser build is also compatible with CommonsJS because it builds with UMD, so you
can use them too.
```js
import { setupCache } from 'axios-cache-interceptor'; // (Default is CJS)
import { setupCache } from 'axios-cache-interceptor/cjs';
```

## UMD

> _NOTE_: Axios itself requires [ES6 Promises](https://axios-http.com/docs/notes#promises)
The UMD code is compiled with `webpack` with support to `>= ES5`. See the
[build config](/webpack.config.js). You can import these files anywhere (Browser,
CommonsJS and more)
The UMD code is compiled with `webpack` to support `>= ES5`. See the
[build config](build/webpack.config.js). You can import these files anywhere (Browser,
CommonsJS, ESM and more)

- `axios-cache-interceptor/dist/index.min.js`: Production file for ES6+
- `axios-cache-interceptor/dist/index.es5.min.js`: Production file for ES5+
- `axios-cache-interceptor/dist/index.es2020.min.js`: Production file for ES2020+
- `axios-cache-interceptor/dist/index.development.js`: Development file (ES2020+)
- `axios-cache-interceptor/umd/es6.min.js`: Production file for ES6+
- `axios-cache-interceptor/umd/es5.min.js`: Production file for ES5+

```html
<!-- You can use the cdn of your choice -->
Expand All @@ -38,3 +34,19 @@ CommonsJS and more)

<!-- Etc... -->
```

```js
import { setupCache } from 'axios-cache-interceptor/umd';
```

## ESModule

The code compiled with `ESModule` is for ES2017+.

This library exports its `ESM` code at `axios-cache-interceptor/esm`. It's useful to
enable _tree-shaking_ and other optimizations. You probably won't have to directly import
from this folder, instead, bundlers should do that for you.

```js
import { setupCache } from 'axios-cache-interceptor/esm';
```
41 changes: 17 additions & 24 deletions docs/pages/installing.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,15 @@ yarn add axios axios-cache-interceptor
```

```js
// CommonJS
const { setupCache } = require('axios-cache-interceptor');
import { setupCache } from 'axios-cache-interceptor';

// ES Modules
import { setupCache } from 'axios-cache-interceptor/esm';

// Universal
const { setupCache } = require('axios-cache-interceptor/umd');
```

## With CDNs
Expand All @@ -36,37 +43,19 @@ import { setupCache } from 'axios-cache-interceptor';
const { setupCache } = window.AxiosCacheInterceptor;
```

<!-- https://www.jsdelivr.com/package/npm/axios-cache-interceptor?path=dist -->

```html
<!-- Replace latest with the desired version -->

<!-- Development for ES2020+ (~30.0KB) -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.development.js"
integrity="sha256-oEvQQcJv78S8QSJOY6XQ2uJ2dGwnnhAsYLDeXx0DHWA="
crossorigin="anonymous"
></script>

<!-- Production for ES6+ (~11.3KB) -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"
integrity="sha256-vtHJnEYMjzfFDDPBAic56ppjVrN6ze2qi7wXM9a/BSM="
crossorigin="anonymous"
src="https://cdn.jsdelivr.net/npm/[email protected]/umd/es6.min.js"
crossorigin
></script>

<!-- Production for ES5+ (~18.2KB) -->
<!-- Production for ES5+ (~18.2KB) (Needs polyfill) -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.es5.min.js"
integrity="sha256-R/q1PnksvXhveo9qidplrGvGGsmFDAsal9M6bUfnNS4="
crossorigin="anonymous"
></script>

<!-- Production for ES2020+ (~9.2KB) -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.es2020.min.js"
integrity="sha256-amiYeGe9088KbQ+4xF0/9tNP+ks4Ze5LF6cZ7aiow3Q="
crossorigin="anonymous"
src="https://cdn.jsdelivr.net/npm/[email protected]/umd/es5.min.js"
crossorigin
></script>
```

Expand All @@ -75,7 +64,11 @@ const { setupCache } = window.AxiosCacheInterceptor;
You can import any [CDN Url](#with-cdns) and use it in your code. **UMD Compatible**

```js
import { setupCache } from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/index.es2020.min.js';
// ESM with Skypack CDN (Preferred!)
import { setupCache } from 'https://cdn.skypack.dev/[email protected]?dts';

// UMD bundled code
import { setupCache } from 'https://cdn.jsdelivr.net/npm/[email protected]/umd/index.min.js';
```

## Support List
Expand Down
Loading

0 comments on commit 4734c5f

Please sign in to comment.