p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

build(esmodule): support building es1015 & esm

This commit is contained in:
yuqi.pyq 2019-11-15 14:59:14 +08:00
parent c163467ef9
commit 4282260d21
30 changed files with 170 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.storybook/config.ts
View File

@ -1,7 +1,9 @@
import { configure, addParameters } from '@storybook/react';
import '@storybook/addon-console';
import { create } from '@storybook/theming';
// tslint:disable-next-line:no-submodule-imports
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,
})
}),
},
});

28
babel.config.js
View File

@ -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'],
};
}

BIN
dev-docs/screenshots/monorep.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

44
dev-docs/构建方案.md
View File

@ -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，对于高德用户就多余了。

11
package.json
View File

@ -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'",
"bundle": "NODE_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"
"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": "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",
"clean": "lerna run clean"
},
"workspaces": [
"packages/*",

2
packages/component/.gitignore vendored
View File

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

15
packages/component/package.json
View File

@ -2,19 +2,22 @@
"name": "@l7/component",
"version": "0.0.1",
"description": "",
"main": "/dist/index.js",
"module": "esm/index.js",
"types": "esm/index.d.ts",
"main": "lib/index.js",
"module": "es/index.js",
"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",
"watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
"clean": "rimraf dist; rimraf es; rimraf lib;",
"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"
},

2
packages/component/tsconfig.build.json
View File

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

2
packages/core/.gitignore vendored
View File

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

15
packages/core/package.json
View File

@ -2,19 +2,22 @@
"name": "@l7/core",
"version": "0.0.1",
"description": "",
"main": "/dist/index.js",
"module": "esm/index.js",
"types": "esm/index.d.ts",
"main": "lib/index.js",
"module": "es/index.js",
"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",
"watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
"clean": "rimraf dist; rimraf es; rimraf lib;",
"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",

3
packages/core/src/services/renderer/gl.ts
View File

@ -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 enum gl {
export const enum gl {
/* ClearBufferMask */
DEPTH_BUFFER_BIT = 0x00000100,
STENCIL_BUFFER_BIT = 0x00000400,

2
packages/core/tsconfig.build.json
View File

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

2
packages/layers/.gitignore vendored
View File

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

15
packages/layers/package.json
View File

@ -2,19 +2,22 @@
"name": "@l7/layers",
"version": "0.0.1",
"description": "",
"main": "/dist/index.js",
"module": "esm/index.js",
"types": "esm/index.d.ts",
"main": "lib/index.js",
"module": "es/index.js",
"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",
"watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
"clean": "rimraf dist; rimraf es; rimraf lib;",
"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",

2
packages/layers/tsconfig.build.json
View File

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

2
packages/maps/.gitignore vendored
View File

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

15
packages/maps/package.json
View File

@ -2,20 +2,23 @@
"name": "@l7/maps",
"version": "0.0.1",
"description": "",
"main": "/dist/index.js",
"module": "esm/index.js",
"types": "esm/index.d.ts",
"main": "lib/index.js",
"module": "es/index.js",
"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",
"watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
"clean": "rimraf dist; rimraf es; rimraf lib;",
"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",

2
packages/maps/tsconfig.build.json
View File

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

2
packages/renderer/.gitignore vendored
View File

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

15
packages/renderer/package.json
View File

@ -2,19 +2,22 @@
"name": "@l7/renderer",
"version": "0.0.1",
"description": "",
"main": "/dist/index.js",
"module": "esm/index.js",
"types": "esm/index.d.ts",
"main": "lib/index.js",
"module": "es/index.js",
"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",
"watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
"clean": "rimraf dist; rimraf es; rimraf lib;",
"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",

2
packages/renderer/tsconfig.build.json
View File

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

2
packages/scene/.gitignore vendored
View File

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

15
packages/scene/package.json
View File

@ -2,19 +2,22 @@
"name": "@l7/scene",
"version": "0.0.1",
"description": "",
"main": "/dist/index.js",
"module": "esm/index.js",
"types": "esm/index.d.ts",
"main": "lib/index.js",
"module": "es/index.js",
"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",
"watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
"clean": "rimraf dist; rimraf es; rimraf lib;",
"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",

2
packages/scene/tsconfig.build.json
View File

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

2
packages/source/.gitignore vendored
View File

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

15
packages/source/package.json
View File

@ -2,19 +2,22 @@
"name": "@l7/source",
"version": "0.0.1",
"description": "",
"main": "/dist/index.js",
"module": "esm/index.js",
"types": "esm/index.d.ts",
"main": "lib/index.js",
"module": "es/index.js",
"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",
"watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
"clean": "rimraf dist; rimraf es; rimraf lib;",
"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"
},

2
packages/source/tsconfig.build.json
View File

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

2
packages/utils/.gitignore vendored
View File

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

15
packages/utils/package.json
View File

@ -2,19 +2,22 @@
"name": "@l7/utils",
"version": "0.0.1",
"description": "",
"main": "/dist/index.js",
"module": "esm/index.js",
"types": "esm/index.d.ts",
"main": "lib/index.js",
"module": "es/index.js",
"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",
"watch": "BABEL_ENV=build babel src --watch --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
"clean": "rimraf dist; rimraf es; rimraf lib;",
"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",

2
packages/utils/tsconfig.build.json
View File

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