Use dynamic imports instead of require.ensure

I left out jsmediatags so as not to conflict with #679
This commit is contained in:
Jordan Eldredge 2018-10-17 20:31:31 -07:00
parent 68ad3ce5c8
commit 031c9733f1
7 changed files with 54 additions and 76 deletions

View file

@ -20,17 +20,26 @@
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-proposal-class-properties"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties"
],
"env": {
"test": {
"presets": ["@babel/preset-react"],
"plugins": ["@babel/plugin-transform-modules-commonjs"]
"plugins": [
"@babel/plugin-transform-modules-commonjs",
"@babel/plugin-syntax-dynamic-import"
]
},
"library": {
"plugins": [
"babel-plugin-remove-webpack",
"@babel/plugin-transform-runtime"
]
},
"production": {
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
}
}

View file

@ -22,7 +22,10 @@ module.exports = {
test: /\.(js|ts|tsx)?$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader"
loader: "babel-loader",
options: {
envName: "production"
}
}
},
{

View file

@ -112,21 +112,10 @@ export default class Presets {
}
async _convertPreset(file) {
return new Promise((resolve, reject) => {
require.ensure(
["milkdrop-preset-converter-aws"],
async require => {
const { convertPreset } = require("milkdrop-preset-converter-aws");
try {
resolve(convertPreset(file, this._presetConverterEndpoint));
} catch (e) {
reject(e);
}
},
reject,
"milkdrop-preset-converter"
);
});
const {
convertPreset
} = await import(/* webpackChunkName: "milkdrop-preset-converter" */ "milkdrop-preset-converter-aws");
return convertPreset(file, this._presetConverterEndpoint);
}
async _selectIndex(idx) {

View file

@ -6,51 +6,36 @@ import {
async function loadInitialDependencies(): Promise<
InitialButterchurnDependencies
> {
return new Promise(
(
resolve: (initialDependencies: InitialButterchurnDependencies) => void,
reject
) => {
// @ts-ignore Eventually we can replace these with async imports
require.ensure(
[
"butterchurn",
"butterchurn-presets/lib/butterchurnPresetsMinimal.min",
"butterchurn-presets/lib/butterchurnPresetPackMeta.min"
],
// @ts-ignore Eventually we can replace these with async imports
require => {
const butterchurn = require("butterchurn");
const butterchurnMinimalPresets = require("butterchurn-presets/lib/butterchurnPresetsMinimal.min");
const presetPackMeta = require("butterchurn-presets/lib/butterchurnPresetPackMeta.min");
resolve({
butterchurn,
minimalPresets: butterchurnMinimalPresets.getPresets(),
presetKeys: presetPackMeta.getMainPresetMeta().presets
});
},
reject,
const [butterchurn, butterchurnMinimalPresets, presetPackMeta] =
// prettier-ignore
await Promise.all([
import(
/* webpackChunkName: "butterchurn-initial-dependencies" */
// @ts-ignore
"butterchurn"
);
}
);
),
import(
/* webpackChunkName: "butterchurn-initial-dependencies" */
// @ts-ignore
"butterchurn-presets/lib/butterchurnPresetsMinimal.min"
),
import(
/* webpackChunkName: "butterchurn-initial-dependencies" */
// @ts-ignore
"butterchurn-presets/lib/butterchurnPresetPackMeta.min"
)
]);
return {
butterchurn,
minimalPresets: butterchurnMinimalPresets.getPresets(),
presetKeys: presetPackMeta.getMainPresetMeta().presets
};
}
async function loadNonMinimalPresets() {
return new Promise((resolve, reject) => {
// @ts-ignore Eventually we can replace these with async imports
require.ensure(
["butterchurn-presets/lib/butterchurnPresetsNonMinimal.min"],
// @ts-ignore Eventually we can replace these with async imports
require => {
resolve(
require("butterchurn-presets/lib/butterchurnPresetsNonMinimal.min").getPresets()
);
},
reject,
"butterchurn-presets"
);
});
return (await import(/* webpackChunkName: "butterchurn-non-minimal-presets" */
// @ts-ignore
"butterchurn-presets/lib/butterchurnPresetsNonMinimal.min")).getPresets();
}
const options: ButterchurnOptions = {

View file

@ -43,22 +43,6 @@ import {
import { bindToIndexedDB } from "./indexedDB";
const requireJSZip = () => {
return new Promise((resolve, reject) => {
require.ensure(
["jszip/dist/jszip"],
require => {
resolve(require("jszip/dist/jszip"));
},
e => {
console.error("Error loading JSZip", e);
reject(e);
},
"jszip"
);
});
};
const requireJSMediaTags = () => {
return new Promise((resolve, reject) => {
require.ensure(
@ -249,7 +233,8 @@ Raven.context(async () => {
}
],
enableHotkeys: true,
requireJSZip,
requireJSZip: () =>
import(/* webpackChunkName: "jszip" */ "jszip/dist/jszip"),
requireJSMediaTags,
__extraWindows,
__enableMediaLibrary: library,

View file

@ -51,6 +51,7 @@
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-modules-commonjs": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/polyfill": "^7.0.0",

View file

@ -322,6 +322,12 @@
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-dynamic-import@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.0.0.tgz#6dfb7d8b6c3be14ce952962f658f3b7eb54c33ee"
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-json-strings@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.0.0.tgz#0d259a68090e15b383ce3710e01d5b23f3770cbd"