8000 feat!: turn on modern mode by default, and provide a `--no-module` option by haoqunjiang · Pull Request #6416 · vuejs/vue-cli · GitHub
[go: up one dir, main page]
Skip to content

feat!: turn on modern mode by default, and provide a --no-module option #6416

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Apr 14, 2021
Merged

feat!: turn on modern mode by default, and provide a --no-module option #6416

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2726dca
test: add test for skipping safari nomodule fix injection
haoqunjiang Apr 8, 2021
1b21eb2
feat: only inject safari-nomodule-fix when necessary
haoqunjiang Apr 8, 2021
b079973
feat: modern mode on by default, and `--no-module` option
haoqunjiang Apr 9, 2021
7ec5c36
refactor: eliminate usage of `args.modern`
haoqunjiang Apr 9, 2021
1d55068
fix: fix the issues caused by the renaming from modern to module
haoqunjiang Apr 9, 2021
871d247
fix: compat with new `--no-module` flag
haoqunjiang Apr 13, 2021
1e764a1
fix: fix blur & focus event of the xterm
haoqunjiang Apr 13, 2021
2b60277
test: bump timeout
haoqunjiang Apr 13, 2021
5fb28f6
test: add test for `--no-module`
haoqunjiang Apr 13, 2021
5c96b0a
test: more thorough test for module build
haoqunjiang Apr 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: modern mode on by default, and --no-module option 
`--no-modern` sounds weird, so I prefer the `--no-module` option.
But `--no-modern` is kept for the convenience of implementation, could
be removed later.
  • Loading branch information
@haoqunjiang
haoqunjiang committed Apr 9, 2021
commit b079973dd7dd8787aa9ee442f28f6c7d13bd908d
4 changes: 2 additions & 2 deletions packages/@vue/cli-service/__tests__/build.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ test('build', async () => {
// expect(index).toMatch(/<link [^>]+app[^>]+\.css" rel="preload" as="style">/)

// should inject scripts
expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors\.\w{8}\.js">/)
expect(index).toMatch(/<script defer="defer" src="\/js\/app\.\w{8}\.js">/)
expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors-legacy\.\w{8}\.js" nomodule>/)
expect(index).toMatch(/<script defer="defer" src="\/js\/app-legacy\.\w{8}\.js" nomodule>/)
// should inject css
expect(index).toMatch(/<link href="\/css\/app\.\w{8}\.css" rel="stylesheet">/)

Expand Down
13 changes: 8 additions & 5 deletions packages/@vue/cli-service/__tests__/modernMode.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ let server, browser
test('modern mode', async () => {
const project = await create('modern-mode', defaultPreset)

const { stdout } = await project.run('vue-cli-service build --modern')
const { stdout } = await project.run('vue-cli-service build')
expect(stdout).toMatch('Build complete.')

// assert correct bundle files
Expand Down Expand Up @@ -45,7 +45,7 @@ test('modern mode', async () => {

// Test crossorigin="use-credentials"
await project.write('vue.config.js', `module.exports = { crossorigin: 'use-credentials' }`)
const { stdout: stdout2 } = await project.run('vue-cli-service build --modern')
const { stdout: stdout2 } = await project.run('vue-cli-service build')
expect(stdout2).toMatch('Build complete.')
const index2 = await project.read('dist/index.html')
// should use <script type="module" crossorigin="use-credentials"> for modern bundle
Expand Down Expand Up @@ -82,7 +82,7 @@ test('should not inject the nomodule-fix script if Safari 10 is not targeted', a
// the default targets already excludes safari 10
const project = await create('skip-safari-fix', defaultPreset)

const { stdout } = await project.run('vue-cli-service build --modern')
const { stdout } = await project.run('vue-cli-service build')
expect(stdout).toMatch('Build complete.')

// should contain no inline scripts in the output html
Expand All @@ -100,14 +100,14 @@ test('should inject nomodule-fix script when Safari 10 support is required', asy
pkg.browserslist.push('safari > 10')
await project.write('package.json', JSON.stringify(pkg, null, 2))

let { stdout } = await project.run('vue-cli-service build --modern')
let { stdout } = await project.run('vue-cli-service build')
let index = await project.read('dist/index.html')
// should inject Safari 10 nomodule fix as an inline script
const { safariFix } = require('../lib/webpack/ModernModePlugin')
expect(index).toMatch(`<script>${safariFix}</script>`)

// `--no-unsafe-inline` option
stdout = (await project.run('vue-cli-service build --modern --no-unsafe-inline')).stdout
stdout = (await project.run('vue-cli-service build --no-unsafe-inline')).stdout
expect(stdout).toMatch('Build complete.')
// should output a separate safari-nomodule-fix bundle
const files = await fs.readdir(path.join(project.dir, 'dist/js'))
Expand All @@ -117,6 +117,9 @@ test('should inject nomodule-fix script when Safari 10 support is required', asy
expect(index).not.toMatch(/[^>]\s*<\/script>/)
})

test.todo('--no-module')
test.todo('--no-modern as an alias to --no-module')

afterAll(async () => {
if (browser) {
await browser.close()
Expand Down
24 changes: 14 additions & 10 deletions packages/@vue/cli-service/lib/commands/build/index.js
View file
Open in desktop
BED6
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
const defaults = {
clean: true,
target: 'app',
module: true,
formats: 'commonjs,umd,umd-min',
'unsafe-inline': true
}
Expand All @@ -26,7 +27,7 @@ module.exports = (api, options) => {
options: {
'--mode': `specify env mode (default: production)`,
'--dest': `specify output directory (default: ${options.outputDir})`,
'--modern': `build app targeting modern browsers with auto fallback`,
'--no-module': `build app without generating <script type="module"> chunks for modern browsers`,
'--no-unsafe-inline': `build app without introducing inline scripts`,
'--target': `app | lib | wc | wc-async (default: ${defaults.target})`,
'--inline-vue': 'include the Vue module in the final bundle of library or web component target',
Expand All @@ -38,7 +39,8 @@ module.exports = (api, options) => {
'--report-json': 'generate report.json to help analyze bundle content',
'--skip-plugins': `comma-separated list of plugin names to skip for this run`,
'--watch': `watch for changes`,
'--stdin': `close when stdin ends`
'--stdin': `close when stdin ends`,
'--no-modern': `(deprecated) same as --no-module`
}
}, async (args, rawArgs) => {
for (const key in defaults) {
Expand All @@ -51,6 +53,16 @@ module.exports = (api, options) => {
args.entry = args.entry || 'src/App.vue'
}

// A trick to quickly introduce the `--no-module` command
// without modifying the rest of the code
// todo: refactor this later
if (args.module != null) {
args.modern = args.module
} else {
// Make --no-modern an alias of --no-module
args.module = args.modern
}

process.env.VUE_CLI_BUILD_TARGET = args.target
if (args.modern && args.target === 'app') {
process.env.VUE_CLI_MODERN_MODE = true
Expand Down Expand Up @@ -78,14 +90,6 @@ module.exports = (api, options) => {
}
delete process.env.VUE_CLI_MODERN_MODE
} else {
if (args.modern) {
const { warn } = require('@vue/cli-shared-utils')
warn(
`Modern mode only works with default target (app). ` +
`For libraries or web components, use the browserslist ` +
`config to specify target browsers.`
)
}
await build(args, api, options)
}
delete process.env.VUE_CLI_BUILD_TARGET
Expand Down
0