From 32dd969227271e3be17e0cd7388654ff0f85e399 Mon Sep 17 00:00:00 2001 From: hronro Date: Mon, 20 Jul 2020 17:23:42 +0800 Subject: [PATCH 1/4] feat(build): add an option to use SystemJS --- package.json | 1 + src/node/build/buildPluginHtml.ts | 29 ++++++++++++++++++++++++++--- src/node/build/index.ts | 6 +++++- src/node/config.ts | 24 ++++++++++++++++++++++++ yarn.lock | 5 +++++ 5 files changed, 61 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 477f252edd2f9a..27ab3da8fb25c3 100644 --- a/package.json +++ b/package.json @@ -100,6 +100,7 @@ "rollup-plugin-web-worker-loader": "^1.3.1", "selfsigned": "^1.10.8", "slash": "^3.0.0", + "systemjs": "^6.7.1", "vue": "^3.0.2", "ws": "^7.3.1" }, diff --git a/src/node/build/buildPluginHtml.ts b/src/node/build/buildPluginHtml.ts index da2f8739e9e4bc..e363b89f028476 100644 --- a/src/node/build/buildPluginHtml.ts +++ b/src/node/build/buildPluginHtml.ts @@ -10,7 +10,7 @@ import { } from '../utils' import { resolveAsset, registerAssets } from './buildPluginAsset' import { InternalResolver } from '../resolver' -import { UserConfig } from '../config' +import { UserConfig, BuildConfig } from '../config' import { parse as Parse, transform as Transform, @@ -28,6 +28,7 @@ export const createBuildHtmlPlugin = async ( inlineLimit: number, resolver: InternalResolver, shouldPreload: ((chunk: OutputChunk) => boolean) | null, + useSystemJs: BuildConfig['useSystemJs'], config: UserConfig ) => { if (!fs.existsSync(indexPath)) { @@ -80,11 +81,33 @@ export const createBuildHtmlPlugin = async ( } } + const injectSystemJs = (html: string) => { + let tag: string + if (typeof useSystemJs === 'string') { + tag = `` + } else if (useSystemJs) { + const systemJsRuntime = fs.readFileSync( + require.resolve('systemjs/dist/s.min.js'), + 'utf8' + ) + tag = `` + } else { + return html + } + if (/<\/head>/.test(html)) { + return html.replace(/<\/head>/, `${tag}\n`) + } else { + return tag + '\n' + html + } + } + const injectScript = (html: string, filename: string) => { filename = isExternalUrl(filename) ? filename : `${publicBasePath}${path.posix.join(assetsDir, filename)}` - const tag = `` + const tag = useSystemJs + ? `` + : `` if (/<\/head>/.test(html)) { return html.replace(/<\/head>/, `${tag}\n`) } else { @@ -105,7 +128,7 @@ export const createBuildHtmlPlugin = async ( } const renderIndex = async (bundleOutput: RollupOutput['output']) => { - let result = processedHtml + let result = injectSystemJs(processedHtml) for (const chunk of bundleOutput) { if (chunk.type === 'chunk') { if (chunk.isEntry) { diff --git a/src/node/build/index.ts b/src/node/build/index.ts index ce23db344d65a5..9a97aa2080765f 100644 --- a/src/node/build/index.ts +++ b/src/node/build/index.ts @@ -288,6 +288,7 @@ function prepareConfig(config: Partial): BuildConfig { rollupPluginVueOptions = {}, root = process.cwd(), shouldPreload = null, + useSystemJs = false, silent = false, sourcemap = false, terserOptions = {}, @@ -330,6 +331,7 @@ function prepareConfig(config: Partial): BuildConfig { rollupPluginVueOptions, root, shouldPreload, + useSystemJs, silent, sourcemap, terserOptions, @@ -365,6 +367,7 @@ export async function build( silent, sourcemap, shouldPreload, + useSystemJs, env, mode: configMode, define: userDefineReplacements, @@ -405,6 +408,7 @@ export async function build( assetsInlineLimit, resolver, shouldPreload, + useSystemJs, options ) @@ -592,7 +596,7 @@ export async function build( await bundle[write ? 'write' : 'generate']({ dir: resolvedAssetsPath, - format: 'es', + format: useSystemJs ? 'system' : 'es', sourcemap, entryFileNames: `[name].[hash].js`, chunkFileNames: `[name].[hash].js`, diff --git a/src/node/config.ts b/src/node/config.ts index 753e2eca6993af..96288179fa1e34 100644 --- a/src/node/config.ts +++ b/src/node/config.ts @@ -339,6 +339,30 @@ export interface BuildConfig extends Required { * @internal */ ssr?: boolean + /** + * Set to `false` will produce modular javascript code, + * which requires browser's native ES module support, + * other options will use SystemJS to load each module instead. + * Set to `true` will insert the SystemJS runtime to a inline script tag, + * set to string will load the SystemJS runtime via CDN you specified. + * + * Example `vite.config.js`: + * ```js + * module.exports = { + * // by default vite will not use SystemJS + * useSystemJs: false, + * + * // will insert a inline script tag contains SystemJS runtime + * useSystemJs: true, + * + * // will load SystemJS runtime via CDN + * useSystemJs: '//unpkg.com/systemjs@6/dist/s.min.js', + * } + * ``` + * + * @default false + */ + useSystemJs: boolean | string // The following are API / config only and not documented in the CLI. -------- /** diff --git a/yarn.lock b/yarn.lock index 84371e7b6d1d73..3d2ee5be841abc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6433,6 +6433,11 @@ symbol-tree@^3.2.4: resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== +systemjs@^6.7.1: + version "6.7.1" + resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.7.1.tgz#3db5036f450180a0701e078fbb5b434a690026f0" + integrity sha512-Q78H/SYy9ErC8PH8r9vA/FcQ3X+Hf33dOpx2JKP/Ma6f2gHuSScPFuCKZH+6CIj7EsIJlzODxSG4mMIpjOh5oA== + tar-fs@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.0.tgz#d1cdd121ab465ee0eb9ccde2d35049d3f3daf0d5" From b1922463779cba6f2483449a3e714d79e63e60e8 Mon Sep 17 00:00:00 2001 From: Alec Larson <1925840+aleclarson@users.noreply.github.com> Date: Tue, 10 Nov 2020 08:56:22 -0500 Subject: [PATCH 2/4] refactor: check `useSystemJs` before calling `injectSystemJs` --- src/node/build/buildPluginHtml.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/node/build/buildPluginHtml.ts b/src/node/build/buildPluginHtml.ts index e363b89f028476..a19b7df1ce0e8a 100644 --- a/src/node/build/buildPluginHtml.ts +++ b/src/node/build/buildPluginHtml.ts @@ -85,20 +85,17 @@ export const createBuildHtmlPlugin = async ( let tag: string if (typeof useSystemJs === 'string') { tag = `` - } else if (useSystemJs) { + } else { const systemJsRuntime = fs.readFileSync( require.resolve('systemjs/dist/s.min.js'), 'utf8' ) tag = `` - } else { - return html } if (/<\/head>/.test(html)) { return html.replace(/<\/head>/, `${tag}\n`) - } else { - return tag + '\n' + html } + return tag + '\n' + html } const injectScript = (html: string, filename: string) => { @@ -128,7 +125,7 @@ export const createBuildHtmlPlugin = async ( } const renderIndex = async (bundleOutput: RollupOutput['output']) => { - let result = injectSystemJs(processedHtml) + let result = useSystemJs ? injectSystemJs(processedHtml) : processedHtml for (const chunk of bundleOutput) { if (chunk.type === 'chunk') { if (chunk.isEntry) { From fb37a3abb498c26da6cd01d9e883e3589f3e8452 Mon Sep 17 00:00:00 2001 From: Alec Larson <1925840+aleclarson@users.noreply.github.com> Date: Tue, 10 Nov 2020 08:56:44 -0500 Subject: [PATCH 3/4] fix: remove `sourceMappingURL` from inlined systemjs --- src/node/build/buildPluginHtml.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/node/build/buildPluginHtml.ts b/src/node/build/buildPluginHtml.ts index a19b7df1ce0e8a..9cadfbeaf00c6c 100644 --- a/src/node/build/buildPluginHtml.ts +++ b/src/node/build/buildPluginHtml.ts @@ -86,10 +86,10 @@ export const createBuildHtmlPlugin = async ( if (typeof useSystemJs === 'string') { tag = `` } else { - const systemJsRuntime = fs.readFileSync( - require.resolve('systemjs/dist/s.min.js'), - 'utf8' - ) + const systemJsRuntime = fs + .readFileSync(require.resolve('systemjs/dist/s.min.js'), 'utf8') + .replace(/\n\/\/# sourceMappingURL=[^\n]+\n$/, '') + tag = `` } if (/<\/head>/.test(html)) { From cd9307315ba5a9c1afee4ccd481cf45771675965 Mon Sep 17 00:00:00 2001 From: Alec Larson <1925840+aleclarson@users.noreply.github.com> Date: Wed, 11 Nov 2020 10:44:56 -0500 Subject: [PATCH 4/4] refactor: change `useSystemJs` argument type in buildPluginHtml --- src/node/build/buildPluginHtml.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/node/build/buildPluginHtml.ts b/src/node/build/buildPluginHtml.ts index 9cadfbeaf00c6c..e125c209f6224d 100644 --- a/src/node/build/buildPluginHtml.ts +++ b/src/node/build/buildPluginHtml.ts @@ -10,7 +10,7 @@ import { } from '../utils' import { resolveAsset, registerAssets } from './buildPluginAsset' import { InternalResolver } from '../resolver' -import { UserConfig, BuildConfig } from '../config' +import { UserConfig } from '../config' import { parse as Parse, transform as Transform, @@ -28,7 +28,7 @@ export const createBuildHtmlPlugin = async ( inlineLimit: number, resolver: InternalResolver, shouldPreload: ((chunk: OutputChunk) => boolean) | null, - useSystemJs: BuildConfig['useSystemJs'], + useSystemJs: boolean | string, config: UserConfig ) => { if (!fs.existsSync(indexPath)) {