build(esmodule): support building es1015 & esm

.storybook/config.ts

@@ -1,7 +1,9 @@
-import { configure, addParameters } from '@storybook/react';
+// tslint:disable-next-line:no-submodule-imports
-import '@storybook/addon-console';
-import { create } from '@storybook/theming';
 import '!style-loader!css-loader!sass-loader!./iframe.scss';
+import '@storybook/addon-console';
+import { addParameters, configure } from '@storybook/react';
+import { create } from '@storybook/theming';
+
 addParameters({
   options: {
     isFullscreen: false,
@@ -16,7 +18,7 @@ addParameters({
       brandTitle: 'L7 POC for new architecture',
       brandUrl: 'https://github.com/xiaoiver/L7-POC',
       gridCellSize: 12,
-    })
+    }),
   },
 });
 

babel.config.js

@@ -1,7 +1,14 @@
 // @see https://babeljs.io/docs/en/next/config-files#project-wide-configuration
 module.exports = (api) => {
   api.cache(() => process.env.NODE_ENV);
-  if(api.env('site')) {
+
+  const isSite = api.env('site');
+  const isCDNBundle = api.env('bundle');
+  const isCommonJS = api.env('cjs');
+  const isESModule = api.env('esm');
+  const isTest = api.env('test');
+
+  if (isSite) { //
     return {
       "presets": [
         "babel-preset-gatsby"
@@ -40,13 +47,13 @@ module.exports = (api) => {
           },
           // set `modules: false` when building CDN bundle, let rollup do commonjs works
           // @see https://github.com/rollup/rollup-plugin-babel#modules
-          modules: api.env('bundle') ? false : 'auto',
+          modules: (isCDNBundle || isESModule) ? false : 'auto',
         },
       ],
       [
         '@babel/preset-react',
         {
-          development: process.env.BABEL_ENV !== 'build',
+          development: isCommonJS,
         },
       ],
       '@babel/preset-typescript',
@@ -70,9 +77,10 @@ module.exports = (api) => {
       '@babel/plugin-syntax-dynamic-import',
       // let rollup do commonjs works
       // @see https://github.com/rollup/rollup-plugin-babel#modules
-      api.env('bundle') ? {} : '@babel/plugin-transform-modules-commonjs',
+      (isCDNBundle || isESModule) ? {} : '@babel/plugin-transform-modules-commonjs',
+      // '@babel/plugin-transform-modules-commonjs',
       // 开发模式下以原始文本引入，便于调试
-      api.env('bundle') ? {} : [
+      isCDNBundle ? {} : [
         // import glsl as raw text
         'babel-plugin-inline-import',
         {
@@ -93,11 +101,11 @@ module.exports = (api) => {
       // 按需引用 @see https://github.com/lodash/babel-plugin-lodash
       'lodash',
       // 内联 WebGL 常量 @see https://www.npmjs.com/package/babel-plugin-inline-webgl-constants
-      api.env('bundle') ? 'inline-webgl-constants' : {},
+      isCDNBundle ? 'inline-webgl-constants' : {},
     ],
-    env: {
-      build: {
     ignore: [
+      'node_modules',
+      ...!isTest ? [
         '**/*.test.tsx',
         '**/*.test.ts',
         '**/*.story.tsx',
@@ -106,9 +114,7 @@ module.exports = (api) => {
         '__stories__',
         '**/*/__snapshots__',
         '**/*/__tests__',
+      ]: [],
     ],
-      },
-    },
-    ignore: ['node_modules'],
   };
 }

dev-docs/构建方案.md

@@ -276,9 +276,49 @@ Exiting glsl-minifier!
 
 ## Submodule
 
-使用 Yarn workspaces + Lerna。
+npm 和 yarn 只提供了例如 `npm link` 以及 `yarn link` 这样的功能，而 yarn workspaces 只提供了 monorep 需要的底层 link 功能。相比之下 lerna 提供了更高级的功能例如 publish 和 version。因此 yarn workspaces 和 lerna 完全可以组合使用，这也是例如 Jest 等大型项目的使用方式。
 
-### 异步加载 Mapbox
+![](./screenshots/monorep.png)
+
+构建命令如下，会在各个 package 下生成 `/lib` 和 `/es` 两个文件夹分别包含 ES2015 和 ESModule 产物：
+```bash
+yarn build
+```
+
+### 编译 TS
+
+使用 TS 有两种构建方式：
+* native TypeScript with tsc
+* [@babel/preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)
+
+由于我们的项目中需要使用到一些 babel plugin（装饰器、引入 GLSL 等），因此后者显然是更好的选择。这里我们使用 babel 7 的项目全局配置 configFile。
+
+为了合并 ES2015 与 ESModule，我们参考 [redux](https://babeljs.io/blog/2018/06/26/on-consuming-and-publishing-es2015+-packages#conflating-javascript-modules-and-es2015)：
+```json
+// redux package.json
+{
+  "main": "lib/redux.js", // ES5 + Common JS
+  "module": "es/redux.js", // ES5 + JS Modules
+}
+```
+
+开发模式加上 `--watch` 即可。
+* `--root-mode upward`  使用 root 下的 babel 配置文件
+* `--out-dir dist` 输出到 /dist  文件夹下
+* `--delete-dir-on-start` 每次构建前清空，因此不需要 `rimraf`
+```json
+"scripts": {
+  "build": "run-p build:*",
+  "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+  "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
+},
+```
+
+### [WIP] 生成 TS 声明文件
+
+和构建前类型检查不同，此时我们需要 tsc 输出类型声明文件了，当然不需要包含 story 和测试用例。
+
+### [WIP] 异步加载 Mapbox
 
 以 L7 Bundler 方式使用时，由于需要在运行时根据用户配置项选择地图底图，会导致构建时需要将全部地图依赖引入，无法进行 TreeShaking。
 目前高德地图使用运行时异步加载方式引入，不会导致该问题，但 Mapbox 同样使用 Bundler，对于高德用户就多余了。

package.json

@@ -110,7 +110,7 @@
     "site:clean": "gatsby clean",
     "site:deploy": "npm run site:build && gh-pages -d public",
     "prebuild": "run-p tsc lint",
-    "build": "lerna exec --parallel 'BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments'",
+    "build": "yarn clean && lerna run build",
     "todo:postbuild": "yarn build:declarations",
     "fix": "run-p -c 'lint:ts-* --fix'",
     "lint:css": "stylelint 'packages/**/*.ts{,x}'",
@@ -123,13 +123,14 @@
     "prerelease": "yarn build",
     "release": "lerna publish from-package --registry https://registry.npmjs.com/",
     "storybook": "start-storybook -p 6006",
-    "test": "jest",
+    "test": "BABEL_ENV=test jest",
     "coveralls": "jest --coverage && cat ./tests/coverage/lcov.info | coveralls",
     "tsc": "tsc",
     "build:declarations": "lerna exec --stream --no-bail 'tsc --project ./tsconfig.build.json'",
-    "watch": "lerna exec --parallel 'BABEL_ENV=build babel --watch src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments'",
+    "watch": "yarn clean && lerna exec --parallel 'BABEL_ENV=cjs babel --watch src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments'",
-    "bundle": "NODE_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js",
+    "bundle": "BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js",
-    "glsl-minify": "node_modules/.bin/glsl-minifier -i ./build/example.frag -o ./build/example.min.frag"
+    "glsl-minify": "node_modules/.bin/glsl-minifier -i ./build/example.frag -o ./build/example.min.frag",
+    "clean": "lerna run clean"
   },
   "workspaces": [
     "packages/*",

packages/component/.gitignore

@@ -1,3 +1,3 @@
 lib
-esm
+es
 dist

packages/component/package.json

@@ -2,19 +2,22 @@
   "name": "@l7/component",
   "version": "0.0.1",
   "description": "",
-  "main": "/dist/index.js",
+  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "module": "es/index.js",
-  "types": "esm/index.d.ts",
+  "types": "es/index.d.ts",
   "sideEffects": true,
   "files": [
     "lib",
-    "esm",
+    "es",
     "README.md"
   ],
   "scripts": {
     "tsc": "tsc --project tsconfig.build.json",
-    "build": "BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
-    "watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build": "run-p build:*",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
     "lint:ts": "run-p -c lint:ts-*",
     "test": "jest"
   },

packages/component/tsconfig.build.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "declarationDir": "./dist",
+    "declarationDir": "./es",
     "rootDir": "./src",
     "baseUrl": "./"
   },

packages/core/.gitignore

@@ -1,3 +1,3 @@
 lib
-esm
+es
 dist

packages/core/package.json

@@ -2,19 +2,22 @@
   "name": "@l7/core",
   "version": "0.0.1",
   "description": "",
-  "main": "/dist/index.js",
+  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "module": "es/index.js",
-  "types": "esm/index.d.ts",
+  "types": "es/index.d.ts",
   "sideEffects": true,
   "files": [
     "lib",
-    "esm",
+    "es",
     "README.md"
   ],
   "scripts": {
     "tsc": "tsc --project tsconfig.build.json",
-    "build": "BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
-    "watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
+    "build": "run-p build:*",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
   },
   "author": "xiaoiver",
   "license": "ISC",

packages/core/src/services/renderer/gl.ts

@@ -4,8 +4,7 @@
  * 使用 babel 插件对常量进行内联，以减少最终打包产物大小
  * @see https://github.com/uber/deck.gl/blob/7.1-release/dev-docs/roadmaps/dist-size-roadmap.md#inline-gl-constants
  */
-
+export const enum gl {
-export enum gl {
   /* ClearBufferMask */
   DEPTH_BUFFER_BIT = 0x00000100,
   STENCIL_BUFFER_BIT = 0x00000400,

packages/core/tsconfig.build.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "declarationDir": "./dist",
+    "declarationDir": "./es",
     "rootDir": "./src",
     "baseUrl": "./"
   },

packages/layers/.gitignore

@@ -1,3 +1,3 @@
 lib
-esm
+es
 dist

packages/layers/package.json

@@ -2,19 +2,22 @@
   "name": "@l7/layers",
   "version": "0.0.1",
   "description": "",
-  "main": "/dist/index.js",
+  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "module": "es/index.js",
-  "types": "esm/index.d.ts",
+  "types": "es/index.d.ts",
   "sideEffects": false,
   "files": [
     "lib",
-    "esm",
+    "es",
     "README.md"
   ],
   "scripts": {
     "tsc": "tsc --project tsconfig.build.json",
-    "build": "BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
-    "watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
+    "build": "run-p build:*",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
   },
   "author": "xiaoiver",
   "license": "ISC",

packages/layers/tsconfig.build.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "declarationDir": "./dist",
+    "declarationDir": "./es",
     "rootDir": "./src",
     "baseUrl": "./"
   },

packages/maps/.gitignore

@@ -1,3 +1,3 @@
 lib
-esm
+es
 dist

packages/maps/package.json

@@ -2,20 +2,23 @@
   "name": "@l7/maps",
   "version": "0.0.1",
   "description": "",
-  "main": "/dist/index.js",
+  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "module": "es/index.js",
-  "types": "esm/index.d.ts",
+  "types": "es/index.d.ts",
   "sideEffects": false,
   "files": [
     "lib",
-    "esm",
+    "es",
     "typings/index.d.ts",
     "README.md"
   ],
   "scripts": {
     "tsc": "tsc --project tsconfig.build.json",
-    "build": "BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
-    "watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
+    "build": "run-p build:*",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
   },
   "author": "xiaoiver",
   "license": "ISC",

packages/maps/tsconfig.build.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "declarationDir": "./dist",
+    "declarationDir": "./es",
     "rootDir": "./src",
     "baseUrl": "./"
   },

packages/renderer/.gitignore

@@ -1,3 +1,3 @@
 lib
-esm
+es
 dist

packages/renderer/package.json

@@ -2,19 +2,22 @@
   "name": "@l7/renderer",
   "version": "0.0.1",
   "description": "",
-  "main": "/dist/index.js",
+  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "module": "es/index.js",
-  "types": "esm/index.d.ts",
+  "types": "es/index.d.ts",
   "sideEffects": false,
   "files": [
     "lib",
-    "esm",
+    "es",
     "README.md"
   ],
   "scripts": {
     "tsc": "tsc --project tsconfig.build.json",
-    "build": "BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
-    "watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
+    "build": "run-p build:*",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
   },
   "author": "xiaoiver",
   "license": "ISC",

packages/renderer/tsconfig.build.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "declarationDir": "./dist",
+    "declarationDir": "./es",
     "rootDir": "./src",
     "baseUrl": "./"
   },

packages/scene/.gitignore

@@ -1,3 +1,3 @@
 lib
-esm
+es
 dist

packages/scene/package.json

@@ -2,19 +2,22 @@
   "name": "@l7/scene",
   "version": "0.0.1",
   "description": "",
-  "main": "/dist/index.js",
+  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "module": "es/index.js",
-  "types": "esm/index.d.ts",
+  "types": "es/index.d.ts",
   "sideEffects": false,
   "files": [
     "lib",
-    "esm",
+    "es",
     "README.md"
   ],
   "scripts": {
     "tsc": "tsc --project tsconfig.build.json",
-    "build": "BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
-    "watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
+    "build": "run-p build:*",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
   },
   "author": "xiaoiver",
   "license": "ISC",

packages/scene/tsconfig.build.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "declarationDir": "./dist",
+    "declarationDir": "./es",
     "rootDir": "./src",
     "baseUrl": "./"
   },

packages/source/.gitignore

@@ -1,3 +1,3 @@
 lib
-esm
+es
 dist

packages/source/package.json

@@ -2,19 +2,22 @@
   "name": "@l7/source",
   "version": "0.0.1",
   "description": "",
-  "main": "/dist/index.js",
+  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "module": "es/index.js",
-  "types": "esm/index.d.ts",
+  "types": "es/index.d.ts",
   "sideEffects": true,
   "files": [
     "lib",
-    "esm",
+    "es",
     "README.md"
   ],
   "scripts": {
     "tsc": "tsc --project tsconfig.build.json",
-    "build": "BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
-    "watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build": "run-p build:*",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
     "lint:ts": "run-p -c lint:ts-*",
     "test": "jest"
   },

packages/source/tsconfig.build.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "declarationDir": "./dist",
+    "declarationDir": "./es",
     "rootDir": "./src",
     "baseUrl": "./"
   },

packages/utils/.gitignore

@@ -1,3 +1,3 @@
 lib
-esm
+es
 dist

packages/utils/package.json

@@ -2,19 +2,22 @@
   "name": "@l7/utils",
   "version": "0.0.1",
   "description": "",
-  "main": "/dist/index.js",
+  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "module": "es/index.js",
-  "types": "esm/index.d.ts",
+  "types": "es/index.d.ts",
   "sideEffects": true,
   "files": [
     "lib",
-    "esm",
+    "es",
     "README.md"
   ],
   "scripts": {
     "tsc": "tsc --project tsconfig.build.json",
-    "build": "BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
-    "watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
+    "build": "run-p build:*",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
   },
   "author": "lzxue",
   "license": "ISC",

packages/utils/tsconfig.build.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "declarationDir": "./dist",
+    "declarationDir": "./es",
     "rootDir": "./src",
     "baseUrl": "./"
   },