diff --git a/docs/guide/build.md b/docs/guide/build.md index dfdf1ef038f214..98fcf641093d5e 100644 --- a/docs/guide/build.md +++ b/docs/guide/build.md @@ -6,7 +6,7 @@ When it is time to deploy your app for production, simply run the `vite build` c The production bundle assumes a baseline support for [Native ES modules dynamic imports](https://caniuse.com/es6-module-dynamic-import). By default, all code is minimally transpiled with target `es2020` (only for terser minification compatibility). You can specify the target range via the [`build.target` config option](/config/#build-target), where the lowest target available is `es2015`. -Legacy browsers _can_ be supported via plugins that post-process the build output for compatibility (e.g. [`@rollup/plugin-babel`](https://github.com/rollup/plugins/tree/master/packages/babel) + [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) + [SystemJS](https://github.com/systemjs/systemjs)), however this is not a built-in feature. +Legacy browsers _can_ be supported via plugins that post-process the build output for compatibility (e.g. [`@rollup/plugin-babel`](https://github.com/rollup/plugins/tree/master/packages/babel) + [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) + [SystemJS](https://github.com/systemjs/systemjs)). This is not a built-in feature, but there is plan to provide an official plugin that automatically emits a separate legacy bundle. ## Public Base Path diff --git a/packages/create-app/CHANGELOG.md b/packages/create-app/CHANGELOG.md new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/create-app/README.md b/packages/create-app/README.md index 033ef9b011de7f..23aa31b9fe4367 100644 --- a/packages/create-app/README.md +++ b/packages/create-app/README.md @@ -27,6 +27,7 @@ npm init @vitejs/app my-vue-app --template vue Currently supported template presets include: +- `vanilla` - `vue` - `vue-ts` - `react` diff --git a/packages/create-app/index.js b/packages/create-app/index.js index b46ca4f1f9570a..8bddf82db04a62 100755 --- a/packages/create-app/index.js +++ b/packages/create-app/index.js @@ -6,15 +6,30 @@ const path = require('path') const argv = require('minimist')(process.argv.slice(2)) const { prompt } = require('enquirer') -const targetDir = argv._[0] || '.' const cwd = process.cwd() -const root = path.join(cwd, targetDir) + const renameFiles = { _gitignore: '.gitignore' } -console.log(`Scaffolding project in ${root}...`) async function init() { + let targetDir = argv._[0] + if (!targetDir) { + /** + * @type {{ name: string }} + */ + const { name } = await prompt({ + type: 'input', + name: 'name', + message: `Project name:`, + initial: 'vite-project' + }) + targetDir = name + } + + const root = path.join(cwd, targetDir) + console.log(`Scaffolding project in ${root}...`) + if (!fs.existsSync(root)) { fs.mkdirSync(root, { recursive: true }) } else { @@ -26,6 +41,7 @@ async function init() { const { yes } = await prompt({ type: 'confirm', name: 'yes', + initial: 'Y', message: `Target directory ${targetDir} is not empty.\n` + `Remove existing files and continue?` @@ -38,10 +54,22 @@ async function init() { } } - const templateDir = path.join( - __dirname, - `template-${argv.t || argv.template || 'vue'}` - ) + // determine template + let template = argv.t || argv.template + if (!template) { + /** + * @type {{ t: string }} + */ + const { t } = await prompt({ + type: 'select', + name: 't', + message: `Select a template:`, + choices: ['vanilla', 'vue', 'vue-ts', 'react', 'react-ts'] + }) + template = t + } + + const templateDir = path.join(__dirname, `template-${template}`) const write = (file, content) => { const targetPath = renameFiles[file] diff --git a/packages/create-app/template-react-ts/src/App.tsx b/packages/create-app/template-react-ts/src/App.tsx index af4490c3b2ef9f..f6b94f610f7f2a 100644 --- a/packages/create-app/template-react-ts/src/App.tsx +++ b/packages/create-app/template-react-ts/src/App.tsx @@ -11,19 +11,32 @@ function App() { logo

Hello Vite + React!

- +

Edit App.tsx and save to test HMR updates.

- - Learn React - +

+ + Learn React + + {' | '} + + Vite Docs + +

) diff --git a/packages/create-app/template-react/src/App.jsx b/packages/create-app/template-react/src/App.jsx index 74f52af9a4da74..c6be65d44eb387 100644 --- a/packages/create-app/template-react/src/App.jsx +++ b/packages/create-app/template-react/src/App.jsx @@ -11,19 +11,32 @@ function App() { logo

Hello Vite + React!

- +

Edit App.jsx and save to test HMR updates.

- - Learn React - +

+ + Learn React + + {' | '} + + Vite Docs + +

) diff --git a/packages/create-app/template-vanilla/index.html b/packages/create-app/template-vanilla/index.html new file mode 100644 index 00000000000000..e4f0209a1f8b8a --- /dev/null +++ b/packages/create-app/template-vanilla/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/packages/create-app/template-vanilla/main.js b/packages/create-app/template-vanilla/main.js new file mode 100644 index 00000000000000..4c0070f03c7ba0 --- /dev/null +++ b/packages/create-app/template-vanilla/main.js @@ -0,0 +1,6 @@ +import './style.css' + +document.querySelector('#app').innerHTML = ` +

Hello Vite!

+ Documentation +` diff --git a/packages/create-app/template-vanilla/package.json b/packages/create-app/template-vanilla/package.json new file mode 100644 index 00000000000000..c901d59695e877 --- /dev/null +++ b/packages/create-app/template-vanilla/package.json @@ -0,0 +1,11 @@ +{ + "name": "vite-starter", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build" + }, + "devDependencies": { + "vite": "^2.0.0-beta.1" + } +} diff --git a/packages/create-app/template-vanilla/style.css b/packages/create-app/template-vanilla/style.css new file mode 100644 index 00000000000000..89778b81515f05 --- /dev/null +++ b/packages/create-app/template-vanilla/style.css @@ -0,0 +1,8 @@ +#app { + font-family: Avenir, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + color: #2c3e50; + margin-top: 60px; +} \ No newline at end of file diff --git a/packages/create-app/template-vue-ts/src/components/HelloWorld.vue b/packages/create-app/template-vue-ts/src/components/HelloWorld.vue index 5c5074b466203d..fdbde68290546b 100644 --- a/packages/create-app/template-vue-ts/src/components/HelloWorld.vue +++ b/packages/create-app/template-vue-ts/src/components/HelloWorld.vue @@ -1,5 +1,11 @@