WIP: Moving from webpack to rollup, attempt 2

README.md

@@ -18,7 +18,9 @@ You will need:
 
 - [Three.js build](https://github.com/mrdoob/three.js/blob/master/build/three.js)
 - [GLTFLoader](https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js)
-- [A build of @pixiv/three-vrm](https://github.com/pixiv/three-vrm/releases)
+- [A build of @pixiv/three-vrm](https://unpkg.com/browse/@pixiv/three-vrm/lib/)
+	- `.module` ones are ESM, otherwise it's UMD and injects its modules into global `THREE`
+	- `.min` ones are minified (for production), otherwise it's not minified and it comes with source maps
 
 Code like this:
 

package.json

@@ -18,14 +18,23 @@
     }
   },
   "devDependencies": {
+    "@rollup/plugin-typescript": "^6.1.0",
     "@typescript-eslint/eslint-plugin": "^4.6.1",
     "@typescript-eslint/parser": "^4.6.1",
+    "cross-env": "^7.0.2",
+    "downlevel-dts": "^0.7.0",
     "eslint": "^7.12.1",
     "eslint-config-prettier": "^7.1.0",
     "husky": "^4.3.0",
     "lerna": "^3.22.1",
     "prettier": "^2.1.2",
     "rimraf": "^3.0.2",
+    "rollup": "^2.33.1",
+    "rollup-plugin-serve": "^1.1.0",
+    "rollup-plugin-string": "^3.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "tslib": "^2.0.3",
+    "typedoc": "^0.20.14",
     "typescript": "^4.0.5"
   },
   "name": "three-vrm"

packages/three-vrm/README.md

@@ -18,7 +18,9 @@ You will need:
 
 - [Three.js build](https://github.com/mrdoob/three.js/blob/master/build/three.js)
 - [GLTFLoader](https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js)
-- [A build of @pixiv/three-vrm](https://github.com/pixiv/three-vrm/releases)
+- [A build of @pixiv/three-vrm](https://unpkg.com/browse/@pixiv/three-vrm/lib/)
+	- `.module` ones are ESM, otherwise it's UMD and injects its modules into global `THREE`
+	- `.min` ones are minified (for production), otherwise it's not minified and it comes with source maps
 
 Code like this:
 

packages/three-vrm/package.json

@@ -10,7 +10,8 @@
     "/types/",
     "LICENSE"
   ],
-  "main": "lib/three-vrm.module.js",
+  "main": "lib/three-vrm.min.js",
+  "module": "lib/three-vrm.module.min.js",
   "types": "types/index.d.ts",
   "typesVersions": {
     "<3.9": {
@@ -27,12 +28,14 @@
     "version": "yarn all",
     "postpublish": "yarn gh-pages",
     "all": "yarn && yarn test && yarn lint && yarn clean && yarn build && yarn docs",
-    "dev": "webpack-dev-server --mode development",
+    "dev": "cross-env NODE_ENV=development SERVE=1 rollup -w -c -o lib/three-vrm.js",
     "clean": "rimraf docs lib ts*/ types",
-    "build": "yarn build-dev && yarn build-prod && yarn build-types",
-    "build-dev": "webpack --mode development",
-    "build-prod": "webpack --mode production",
-    "build-types": "tsc --emitDeclarationOnly && downlevel-dts types ts3.4/types",
+    "build": "yarn build-dev && yarn build-prod && yarn build-moduledev && yarn build-moduleprod && yarn build-types",
+    "build-dev": "cross-env NODE_ENV=development rollup -c -o lib/three-vrm.js",
+    "build-prod": "cross-env NODE_ENV=production rollup -c -o lib/three-vrm.min.js",
+    "build-moduledev": "cross-env NODE_ENV=development ESM=1 rollup -c -o lib/three-vrm.module.js",
+    "build-moduleprod": "cross-env NODE_ENV=production ESM=1 rollup -c -o lib/three-vrm.module.min.js",
+    "build-types": "tsc --declaration --declarationDir ./types --emitDeclarationOnly && downlevel-dts types ts3.4/types",
     "docs": "typedoc --entryPoints ./src/index.ts --out docs",
     "gh-pages": "node ./bin/gh-pages.js",
     "test": "echo There is no test for three-vrm",
@@ -47,24 +50,10 @@
     ]
   },
   "devDependencies": {
-    "@types/webpack": "^4.4.19",
-    "@types/webpack-dev-server": "^3.1.7",
-    "@types/webpack-merge": "^4.1.5",
-    "downlevel-dts": "^0.7.0",
-    "fork-ts-checker-webpack-plugin": "^4.1.4",
     "gh-pages": "^3.1.0",
     "lint-staged": "10.5.3",
     "quicktype": "^15.0.258",
-    "raw-loader": "^4.0.1",
-    "three": "^0.123.0",
-    "ts-loader": "^6.1.0",
-    "ts-node": "^9.1.1",
-    "typedoc": "^0.20.14",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.2.1",
-    "webpack-merge": "^4.2.1",
-    "worker-loader": "^2.0.0"
+    "three": "^0.123.0"
   },
   "peerDependencies": {
     "three": "^0.123.0"

packages/three-vrm/rollup.config.js

@@ -0,0 +1,69 @@
+/* eslint-env node */
+
+import packageJson from './package.json';
+import serve from 'rollup-plugin-serve';
+import { string } from 'rollup-plugin-string';
+import { terser } from 'rollup-plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+
+// == constants ====================================================================================
+/** copyright text */
+const copyright = '(c) 2019-2020 pixiv Inc.';
+
+/** name of the license */
+const licenseName = 'MIT License';
+
+/** url of the license */
+const licenseUri = 'https://github.com/pixiv/three-vrm/blob/master/LICENSE';
+
+/** output name of the module */
+const name = 'THREE_VRM';
+
+// == envs =========================================================================================
+const NODE_ENV = process.env.NODE_ENV;
+const DEV = NODE_ENV === 'development';
+const ESM = process.env.ESM === '1';
+const SERVE = process.env.SERVE === '1';
+
+// == banner =======================================================================================
+const bannerTextDev = `/*!
+ * ${packageJson.name} v${packageJson.version}
+ * ${packageJson.description}
+ *
+ * Copyright ${copyright}
+ * ${packageJson.name} is distributed under ${licenseName}
+ * ${licenseUri}
+ */`;
+
+const bannerTextProd = `/*! ${copyright} - ${licenseUri} */`;
+
+// == module =======================================================================================
+/** will be used to inject the stuff into THREE */
+const outro = `Object.assign(THREE, exports);`;
+
+// == serve ========================================================================================
+const serveOptions = {
+  contentBase: '.',
+};
+
+// == output =======================================================================================
+export default {
+  input: 'src/index.ts',
+  output: {
+    format: ESM ? 'esm' : 'umd',
+    banner: DEV ? bannerTextDev : bannerTextProd,
+    sourcemap: DEV ? 'inline' : false,
+    globals: ESM ? undefined : { three: 'THREE' },
+    name: ESM ? undefined : name,
+    outro: ESM ? undefined : outro,
+  },
+  external: [ 'three' ],
+  plugins: [
+    string({
+      include: ['**/*.frag', '**/*.vert'],
+    }),
+    typescript(),
+    ...(DEV ? [] : [terser()]),
+    ...(SERVE ? [serve(serveOptions)] : []),
+  ],
+};

packages/three-vrm/src/index.ts

@@ -1 +1,12 @@
-export * from './vrm/';
+export * from './VRM';
+export * from './VRMImporter';
+export * from './VRMUtils';
+export * from './blendshape';
+export * from './debug';
+export * from './firstperson';
+export * from './humanoid';
+export * from './lookat';
+export * from './springbone';
+export * from './types';
+export * from './material';
+export * from './meta';

packages/three-vrm/tsconfig.json

@@ -1,8 +1,6 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "outDir": "lib",
-    "declarationDir": "types"
-  }
+  "include": [
+    "./src"
+  ]
 }

tsconfig.json

@@ -1,11 +1,10 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
+    "target": "es6",
+    "module": "es6",
     "lib": ["es2018", "dom"],
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "declaration": true,
     "strict": true
   }
 }