feat: setup universal browser and node builds

In this diff I fixed es modules distribution for bundlers.

Before we had two problems
- bundlers use "module" field to find es module build
- bundlers cannot use provided es module with node target

In this diff I addressed both of them. Now "main" and "module" fields
points to "node" specific versions. "browser" field provides aliases
with browser compatible builds.

All modern browsers support both "module" and "browser" fields.

Author: TrySound

package.json

@@ -2,9 +2,13 @@
   "name": "liquidjs",
   "version": "9.13.0",
   "description": "A simple, expressive, safe and Shopify compatible template engine in pure JavaScript.",
-  "main": "dist/liquid.cjs.js",
-  "es2015": "dist/liquid.esm.js",
-  "browser": "dist/liquid.js",
+  "main": "dist/liquid.node.cjs.js",
+  "module": "dist/liquid.node.esm.js",
+  "es2015": "dist/liquid.browser.esm.js",
+  "browser": {
+    "./dist/liquid.node.cjs.js": "./dist/liquid.browser.umd.js",
+    "./dist/liquid.node.esm.js": "./dist/liquid.browser.esm.js"
+  },
   "types": "dist/liquid.d.ts",
   "scripts": {
     "lint": "eslint .",
@@ -16,7 +20,7 @@
     "benchmark": "node --expose-gc benchmark/index",
     "coverage": "nyc --reporter=html mocha \"test/{unit,integration}/**/*.ts\"",
     "coverage-coveralls": "nyc mocha \"test/{unit,integration}/**/*.ts\" && nyc report --reporter=text-lcov | coveralls",
-    "build": "rollup -c rollup.config.ts && ls -lh dist",
+    "build": "rm -rf dist && rollup -c rollup.config.ts && ls -lh dist",
     "build-docs": "bin/build-docs.sh",
     "watch": "tsc --watch"
   },

rollup.config.ts

@@ -15,9 +15,9 @@ const treeshake = {
 }
 const input = './src/liquid.ts'
 
-const cjs = {
+const nodeCjs = {
   output: [{
-    file: 'dist/liquid.cjs.js',
+    file: 'dist/liquid.node.cjs.js',
     format: 'cjs',
     banner
   }],
@@ -36,9 +36,31 @@ const cjs = {
   input
 }
 
-const esm = {
+const nodeEsm = {
   output: [{
-    file: 'dist/liquid.esm.js',
+    file: 'dist/liquid.node.esm.js',
+    format: 'esm',
+    banner
+  }],
+  external: ['path', 'fs'],
+  plugins: [typescript({
+    tsconfigOverride: {
+      include: [ 'src' ],
+      exclude: [ 'test', 'benchmark' ],
+      compilerOptions: {
+        target: 'ES2017',
+        module: 'ES2015'
+      }
+    }
+  })],
+  treeshake,
+  input
+}
+
+
+const browserEsm = {
+  output: [{
+    file: 'dist/liquid.browser.esm.js',
     format: 'esm',
     banner
   }],
@@ -64,9 +86,9 @@ const esm = {
   input
 }
 
-const umd = {
+const browserUmd = {
   output: [{
-    file: 'dist/liquid.js',
+    file: 'dist/liquid.browser.umd.js',
     name: 'liquidjs',
     format: 'umd',
     sourcemap,
@@ -93,9 +115,9 @@ const umd = {
   input
 }
 
-const min = {
+const browserMin = {
   output: [{
-    file: 'dist/liquid.min.js',
+    file: 'dist/liquid.browser.min.js',
     name: 'liquidjs',
     format: 'umd',
     sourcemap
@@ -124,10 +146,10 @@ const min = {
 
 const bundles = []
 const env = process.env.BUNDLES || ''
-if (env.includes('cjs')) bundles.push(cjs)
-if (env.includes('esm')) bundles.push(esm)
-if (env.includes('umd')) bundles.push(umd)
-if (env.includes('min')) bundles.push(min)
-if (bundles.length === 0) bundles.push(cjs, umd, min, esm)
+if (env.includes('cjs')) bundles.push(nodeCjs)
+if (env.includes('esm')) bundles.push(nodeEsm, browserEsm)
+if (env.includes('umd')) bundles.push(browserUmd)
+if (env.includes('min')) bundles.push(browserMin)
+if (bundles.length === 0) bundles.push(nodeCjs, nodeEsm, browserEsm, browserUmd, browserMin)
 
 export default bundles

test/e2e/xhr.ts

@@ -1,4 +1,4 @@
-import { Liquid } from '../../dist/liquid.js'
+import { Liquid } from '../../dist/liquid.browser.umd.js'
 import * as sinon from 'sinon'
 import { expect, use } from 'chai'
 import { JSDOM } from 'jsdom'