feat: distribute files for ES modules (also support browser) (#105)

ybiquitous · web-flow · commit 1f2010aad88e · 2018-07-10T02:14:22.000+09:00
Build result:

```
dist/
├── bem-ts.js (NEW)
├── bem-ts.min.js (NEW)
├── bem-ts.min.js.map (NEW)
├── index.d.ts
└── index.js
```

For browser, supports source-map and minified version.

And add `docs/` directory for demo, which will be published GitHub Pages.
diff --git a/.travis.yml b/.travis.yml
@@ -16,6 +16,9 @@ before_script:
   - commitlint-travis
   - npm run lint
 
+after_success:
+  - npm run build
+
 branches:
   only:
     - master
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>bem-ts Demo</title>
+    <link rel="stylesheet" href="//unpkg.com/bulma@0.7.1/css/bulma.min.css">
+    <style>
+      body {
+        max-width: 40em;
+        margin: 0 auto;
+        padding: 1em;
+      }
+      h2 {
+        margin-top: 2em;
+      }
+      pre, p {
+        border: 1px solid lightgray;
+        padding: 1em 1.25em;
+        overflow-x: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <h2>Input:</h2>
+    <pre><code></code></pre>
+
+    <h2>Output:</h2>
+    <p><samp></samp></p>
+
+    <script type="module">
+      import block from "../dist/bem-ts.js";
+      const b = block("block");
+      const output = document.querySelector("samp");
+      output.innerHTML = b();
+      output.innerHTML += "<br>" + b({ modifier: true });
+      output.innerHTML += "<br>" + b("element");
+      output.innerHTML += "<br>" + b("element", { modifier: true });
+    </script>
+
+    <script>
+      document.querySelector("code").textContent =
+        document.querySelector("script[type='module']").textContent.replace(/ {2,}/g, "").trim();
+    </script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,22 +11,25 @@
   ],
   "license": "MIT",
   "main": "dist/index.js",
+  "module": "dist/bem-ts.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
     "!*test*"
   ],
   "scripts": {
     "prebuild": "rimraf dist/",
-    "build": "tsc",
-    "build:watch": "npm run build -- --watch",
+    "build": "npm-run-all --print-label --parallel build:*",
+    "build:cjs": "tsc",
+    "build:esm": "tsc --module es2015 --outDir dist/module/ && mv dist/module/index.js dist/bem-ts.js && rimraf dist/module/",
+    "postbuild:esm": "cd dist && uglifyjs bem-ts.js -o bem-ts.min.js --source-map url=bem-ts.min.js.map",
     "test": "nyc tape -r ts-node/register test.ts",
     "test:coverage": "nyc report --reporter=html && opn coverage/index.html",
     "lint:ts": "tslint --project .",
     "lint:ts:fix": "prettier --write \"**/*.ts\" && npm run lint:ts -- --fix",
     "lint:md": "markdownlint --ignore node_modules --ignore CHANGELOG.md \"**/*.md\"",
     "lint:md:fix": "prettier --write \"**/*.md\"",
-    "lint": "npm-run-all --print-name --print-label --parallel lint:*",
+    "lint": "npm-run-all --print-label --parallel lint:*",
     "commitmsg": "commitlint -E GIT_PARAMS",
     "precommit": "lint-staged",
     "release": "standard-version",
@@ -42,6 +45,7 @@
     "tslint": "5.10.0",
     "tslint-config-prettier": "1.13.0",
     "typescript": "2.9.2",
+    "uglify-es": "3.3.9",
     "ybiq": "3.3.0"
   },
   "lint-staged": {
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2017",
     "module": "commonjs",
     "declaration": true,
     "outDir": "./dist",

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"compilerOptions": {`
`3`		`- "target": "es5",`
	`3`	`+ "target": "es2017",`
`4`	`4`	`"module": "commonjs",`
`5`	`5`	`"declaration": true,`
`6`	`6`	`"outDir": "./dist",`