vue-cli - npm Package Compare versions

Comparing version 2.8.1 to 2.8.2

CONTRIBUTING.md

@@ -7,3 +7,3 @@ # vue-cli contributing guide
 `vue-cli` so please report it here. If error appears when you run one of `npm run` scripts, problem originates
-from a template you're using, [maybe one of the offical ones](https://github.com/vuejs-templates). If so, please
+from a template you're using, [maybe one of the official ones](https://github.com/vuejs-templates). If so, please
 open an issue on a template repository.
@@ -10,0 +10,0 @@

docs/build.md

@@ -35,3 +35,3 @@ # vue build
 
-If your want to directly test a component without manually create a Vue instance for it, try:
+If you want to directly test a component without manually create a Vue instance for it, try:
 
@@ -42,4 +42,4 @@ ```bash
 
-<details><summary>How does this work?</summary>
-When the input file ends with `.vue` extension, we use a [default app entry](/lib/default-entry.js) to load the given component, otherwise we treat it as a normal webpack entry. For jsx component which ends with `.js` extension, you can enable this behavior manually by adding `--mount`.
+<details><summary>How does this work?</summary><br>
+When the input file ends with `.vue` extension, we use a [default app entry](/lib/default-entry.es6) to load the given component, otherwise we treat it as a normal webpack entry. For jsx component which ends with `.js` extension, you can enable this behavior manually by adding `--mount`.
 </details>
@@ -57,5 +57,13 @@
 
-For more CLI usages:
+**Watch mode:**
 
 ```bash
+$ vue build index.js --watch
+```
+
+It's similar to `development mode` but does not add hot-reloading support and uses a real file system.
+
+**For more CLI usages:**
+
+```bash
 $ vue build -h
@@ -76,2 +84,14 @@ ```
 
+#### entry
+
+Type: `string` `Array` `Object`
+
+It's the first argument of `vue build` command, eg: `vue build entry.js`. You can set it here to omit it in CLI arguments.
+
+The single-component mode (`--mount`) will not work if you set `entry` to an `Array` or `Object`.
+
+- `Array`: Override `webpackConfig.entry.client`
+- `Object`: Override `webpackConfig.entry`
+- `string`: Added to `webpackConfig.entry.client` or used as `webpackConfig.resolve.alias['your-tasteful-component']` in single-component mode.
+
 #### port
@@ -106,3 +126,3 @@
 
-Note that we use [webpack-merge](https://github.com/survivejs/webpack-merge) to merge you webpack config with default webpack config.
+Note that we use [webpack-merge](https://github.com/survivejs/webpack-merge) to merge your webpack config with default webpack config.
 
@@ -135,6 +155,12 @@ #### autoprefixer
 
-#### html
+#### babel
 
 Type: `Object`
 
+[Babel options](https://github.com/babel/babel-loader#options). You can set `babel.babelrc` to false to disable using `.babelrc`.
+
+#### html
+
+Type: `Object` `Array` `boolean`
+
 [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) options, use this option to customize `index.html` output, default value:
@@ -149,4 +175,31 @@
 
-Check out the [default template](/lib/template.html) file we use.
+Check out the [default template](/lib/template.html) file we use. To disable generating html file, you can set `html` to `false`.
 
+#### filename
+
+Set custom filename for `js` `css` `static` files:
+
+```js
+{
+  filename: {
+    js: 'index.js',
+    css: 'style.css',
+    static: 'static/[name].[ext]'  
+  }
+}
+```
+
+#### disableCompress
+
+Type: `boolean`
+
+In production mode, all generated files will be compressed and produce sourcemaps file. You can use `--disableCompress` to disable this behavior.
+
+#### hmrEntries
+
+Type: `Array`<br>
+Default: `['client']`
+
+Add `webpack-hot-middleware` HMR client to specific webpack entries. By default your app is loaded in `client` entry, so we insert it here.
+
 #### proxy
@@ -164,3 +217,3 @@
 
-This way, you fetch `/api/todos` in your Vue app, the development server will proxy your request to `http://localhost:8080/api/todos`.
+This way, when you fetch `/api/todos` in your Vue app, the development server will proxy your request to `http://localhost:8080/api/todos`.
 
@@ -202,2 +255,25 @@ We use [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware) under the hood, so the `proxy` option can also be an object:
 
+#### run(webpackConfig, options)
+
+Type: `function`
+
+You can use a custom `run` function to perform your own build process instead of the default one. For example, run karma with the processed webpack config:
+
+```js
+const Server = require('karma').Server
+
+module.exports = {
+  run(webpackConfig) {
+    const server = new Server({
+      webpack: webpackConfig,
+      // other karma options...
+    }, exitCode => {
+      console.log('Karma has exited with ' + exitCode)
+      process.exit(exitCode)
+    })
+    server.start()
+  }
+}
+```
+
 ### webpack.config.js
@@ -227,2 +303,6 @@
 
-You can populate a `.babelrc` in project root directory to override it.
+You can set `babel` option in config file or populate a `.babelrc` in project root directory to override it.
+
+### Copy static files
+
+Everything in `./static` folder will be copied to dist folder, for example: `static/favicon.ico` will be copied to `dist/favicon.ico`.

lib/ask.js

@@ -60,2 +60,4 @@ var async = require('async')
       })
+    } else if (typeof answers[key] === 'string') {
+      data[key] = answers[key].replace(/"/g, '\\"')
     } else {
@@ -62,0 +64,0 @@ data[key] = answers[key]

lib/eval.js

@@ -8,3 +8,3 @@ var chalk = require('chalk')
 
-module.exports = function evalualte (exp, data) {
+module.exports = function evaluate (exp, data) {
   /* eslint-disable no-new-func */
@@ -11,0 +11,0 @@ var fn = new Function('data', 'with (data) { return ' + exp + '}')

lib/generate.js

@@ -0,1 +1,2 @@
+var chalk = require('chalk')
 var Metalsmith = require('metalsmith')
@@ -10,2 +11,3 @@ var Handlebars = require('handlebars')
 var filter = require('./filter')
+var logger = require('./logger')
 
@@ -45,12 +47,30 @@ // register handlebars helper
   })
-  metalsmith
-    .use(askQuestions(opts.prompts))
+
+  var helpers = {chalk, logger}
+
+  if (opts.metalsmith && typeof opts.metalsmith.before === 'function') {
+    opts.metalsmith.before(metalsmith, opts, helpers)
+  }
+
+  metalsmith.use(askQuestions(opts.prompts))
     .use(filterFiles(opts.filters))
     .use(renderTemplateFiles(opts.skipInterpolation))
-    .clean(false)
+
+  if (typeof opts.metalsmith === 'function') {
+    opts.metalsmith(metalsmith, opts, helpers)
+  } else if (opts.metalsmith && typeof opts.metalsmith.after === 'function') {
+    opts.metalsmith.after(metalsmith, opts, helpers)
+  }
+
+  metalsmith.clean(false)
     .source('.') // start from template root instead of `./src` which is Metalsmith's default for `source`
     .destination(dest)
-    .build(function (err) {
+    .build(function (err, files) {
       done(err)
-      logMessage(opts.completeMessage, data)
+      if (typeof opts.complete === 'function') {
+        var helpers = {chalk, logger, files}
+        opts.complete(data, helpers)
+      } else {
+        logMessage(opts.completeMessage, data)
+      }
     })
@@ -113,3 +133,6 @@
       render(str, metalsmithMetadata, function (err, res) {
-        if (err) return next(err)
+        if (err) {
+          err.message = `[${file}] ${err.message}`
+          return next(err)
+        }
         files[file].contents = new Buffer(res)
@@ -116,0 +139,0 @@ next()

lib/loaders.js

@@ -24,4 +24,4 @@ // https://github.com/vuejs-templates/webpack/blob/master/template/build/utils.js
       return ExtractTextPlugin.extract({
-        loader: sourceLoader,
-        fallbackLoader: 'vue-style-loader'
+        use: sourceLoader,
+        fallback: 'vue-style-loader'
       })
@@ -28,0 +28,0 @@ } else {

package.json

 {
   "name": "vue-cli",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "description": "A simple CLI for scaffolding Vue.js projects.",
@@ -44,6 +44,7 @@ "preferGlobal": true,
     "consolidate": "^0.14.0",
+    "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.26.1",
     "download-git-repo": "^0.2.1",
     "express": "^4.14.0",
-    "extract-text-webpack-plugin": "2.0.0-beta.5",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
     "file-loader": "^0.9.0",
@@ -65,3 +66,3 @@ "friendly-errors-webpack-plugin": "^1.1.2",
     "request": "^2.67.0",
-    "rimraf": "^2.5.0",
+    "rimraf": "^2.6.1",
     "semver": "^5.1.0",
@@ -81,2 +82,4 @@ "tildify": "^1.2.0",
   "devDependencies": {
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-stage-2": "^6.22.0",
     "chai": "^3.5.0",
@@ -83,0 +86,0 @@ "cross-env": "^1.0.7",

README.md

@@ -7,3 +7,3 @@ # vue-cli [![Build Status](https://img.shields.io/circleci/project/vuejs/vue-cli/master.svg)](https://circleci.com/gh/vuejs/vue-cli) [![npm package](https://img.shields.io/npm/v/vue-cli.svg)](https://www.npmjs.com/package/vue-cli)
 
-Prerequisites: [Node.js](https://nodejs.org/en/) (>=4.x, 6.x preferred) and [Git](https://git-scm.com/).
+Prerequisites: [Node.js](https://nodejs.org/en/) (>=4.x, 6.x preferred), npm version 3+ and [Git](https://git-scm.com/).
 
@@ -81,5 +81,9 @@ ``` bash
   - `filters`: used to conditional filter files to render.
+  
+  - `metalsmith`: used to add custom metalsmith plugins in the chain.
 
   - `completeMessage`: the message to be displayed to the user when the template has been generated. You can include custom instruction here.
 
+  - `complete`: Instead of using `completeMessage`, you can use a function to run stuffs when the template has been generated.
+
 #### prompts
@@ -182,2 +186,32 @@
 
+#### Metalsmith
+
+`vue-cli` uses [metalsmith](https://github.com/segmentio/metalsmith) to generate the project.
+
+You may customize the metalsmith builder created by vue-cli to register custom plugins.
+
+```js
+{
+  "metalsmith": function (metalsmith, opts, helpers) {
+    function customMetalsmithPlugin (files, metalsmith, done) {
+      // Implement something really custom here.
+      done(null, files)
+    }
+    
+    metalsmith.use(customMetalsmithPlugin)
+  }
+}
+```
+
+If you need to hook metalsmith before questions are asked, you may use an object with `before` key.
+
+```js
+{
+  "metalsmith": {
+    before: function (metalsmith, opts, helpers) {},
+    after: function (metalsmith, opts, helpers) {}
+  }
+}
+```
+
 #### Additional data available in meta.{js,json}
@@ -201,2 +235,31 @@
 
+### `complete` function
+
+Arguments:
+
+- `data`: the same data you can access in `completeMessage`:
+  ```js
+  {
+    complete (data) {
+      if (!data.inPlace) {
+        console.log(`cd ${data.destDirName}`)
+      }
+    }
+  }
+  ```
+
+- `helpers`: some helpers you can use to log results.
+  - `chalk`: the `chalk` module
+  - `logger`: [the built-in vue-cli logger](/lib/logger.js)
+  - `files`: An array of generated files
+  ```js
+  {
+    complete (data, {logger, chalk}) {
+      if (!data.inPlace) {
+        logger.log(`cd ${chalk.yellow(data.destDirName)}`)
+      }
+    }
+  }
+  ```
+
 ### Installing a specific template version
@@ -203,0 +266,0 @@

test/e2e/test.js

@@ -13,8 +13,12 @@ const { expect } = require('chai')
 const metadata = require('../../lib/options')
+const { isLocalPath, getTemplatePath } = require('../../lib/local-path')
 
-const MOCK_META_JSON_PATH = './test/e2e/mock-meta-json'
-const MOCK_TEMPLATE_REPO_PATH = './test/e2e/mock-template-repo'
+const MOCK_META_JSON_PATH = path.resolve('./test/e2e/mock-meta-json')
+const MOCK_METALSMITH_CUSTOM_PATH = path.resolve('./test/e2e/mock-metalsmith-custom')
+const MOCK_METALSMITH_CUSTOM_BEFORE_AFTER_PATH = path.resolve('./test/e2e/mock-metalsmith-custom-before-after')
+const MOCK_TEMPLATE_REPO_PATH = path.resolve('./test/e2e/mock-template-repo')
 const MOCK_TEMPLATE_BUILD_PATH = path.resolve('./test/e2e/mock-template-build')
-const MOCK_METADATA_REPO_JS_PATH = './test/e2e/mock-metadata-repo-js'
-const MOCK_SKIP_GLOB = './test/e2e/mock-skip-glob'
+const MOCK_METADATA_REPO_JS_PATH = path.resolve('./test/e2e/mock-metadata-repo-js')
+const MOCK_SKIP_GLOB = path.resolve('./test/e2e/mock-skip-glob')
+const MOCK_ERROR = path.resolve('./test/e2e/mock-error')
 
@@ -37,2 +41,15 @@ function monkeyPatchInquirer (answers) {
 describe('vue-cli', () => {
+  const escapedAnswers = {
+    name: 'vue-cli-test',
+    author: 'John "The Tester" Doe <[e-mail]>',
+    description: 'vue-cli e2e test',
+    preprocessor: {
+      less: true,
+      sass: true
+    },
+    pick: 'no',
+    noEscape: true
+
+  }
+
   const answers = {
@@ -72,4 +89,4 @@ name: 'vue-cli-test',
 
-  it('adds additional data to meta data', () => {
-    const data = generate('test', MOCK_META_JSON_PATH, MOCK_TEMPLATE_BUILD_PATH)
+  it('adds additional data to meta data', done => {
+    const data = generate('test', MOCK_META_JSON_PATH, MOCK_TEMPLATE_BUILD_PATH, done)
     expect(data.destDirName).to.equal('test')
@@ -79,6 +96,6 @@ expect(data.inPlace).to.equal(false)
 
-  it('sets `inPlace` to true when generating in same directory', () => {
+  it('sets `inPlace` to true when generating in same directory', done => {
     const currentDir = process.cwd()
     process.chdir(MOCK_TEMPLATE_BUILD_PATH)
-    const data = generate('test', MOCK_META_JSON_PATH, MOCK_TEMPLATE_BUILD_PATH)
+    const data = generate('test', MOCK_META_JSON_PATH, MOCK_TEMPLATE_BUILD_PATH, done)
     expect(data.destDirName).to.equal('test')
@@ -112,2 +129,58 @@ expect(data.inPlace).to.equal(true)
 
+  it('supports custom metalsmith plugins', done => {
+    generate('test', MOCK_METALSMITH_CUSTOM_PATH, MOCK_TEMPLATE_BUILD_PATH, err => {
+      if (err) done(err)
+
+      expect(exists(`${MOCK_TEMPLATE_BUILD_PATH}/custom/readme.md`)).to.equal(true)
+
+      async.eachSeries([
+        'readme.md'
+      ], function (file, next) {
+        const template = fs.readFileSync(`${MOCK_METALSMITH_CUSTOM_PATH}/template/${file}`, 'utf8')
+        const generated = fs.readFileSync(`${MOCK_TEMPLATE_BUILD_PATH}/custom/${file}`, 'utf8')
+        render(template, {custom: 'Custom'}, (err, res) => {
+          if (err) return next(err)
+          expect(res).to.equal(generated)
+          next()
+        })
+      }, done)
+    })
+  })
+
+  it('supports custom metalsmith plugins with after/before object keys', done => {
+    generate('test', MOCK_METALSMITH_CUSTOM_BEFORE_AFTER_PATH, MOCK_TEMPLATE_BUILD_PATH, err => {
+      if (err) done(err)
+
+      expect(exists(`${MOCK_TEMPLATE_BUILD_PATH}/custom-before-after/readme.md`)).to.equal(true)
+
+      async.eachSeries([
+        'readme.md'
+      ], function (file, next) {
+        const template = fs.readFileSync(`${MOCK_METALSMITH_CUSTOM_BEFORE_AFTER_PATH}/template/${file}`, 'utf8')
+        const generated = fs.readFileSync(`${MOCK_TEMPLATE_BUILD_PATH}/custom-before-after/${file}`, 'utf8')
+        render(template, {before: 'Before', after: 'After'}, (err, res) => {
+          if (err) return next(err)
+          expect(res).to.equal(generated)
+          next()
+        })
+      }, done)
+    })
+  })
+
+  it('generate a vaild package.json with escaped author', done => {
+    monkeyPatchInquirer(escapedAnswers)
+    generate('test', MOCK_TEMPLATE_REPO_PATH, MOCK_TEMPLATE_BUILD_PATH, err => {
+      if (err) done(err)
+
+      const pkg = fs.readFileSync(`${MOCK_TEMPLATE_BUILD_PATH}/package.json`, 'utf8')
+      try {
+        var validData = JSON.parse(pkg)
+        expect(validData.author).to.equal(escapedAnswers.author)
+        done()
+      } catch (err) {
+        done(err)
+      }
+    })
+  })
+
   it('avoid rendering files that do not have mustaches', done => {
@@ -207,2 +280,33 @@ monkeyPatchInquirer(answers)
   })
+
+  it('checks for local path', () => {
+    expect(isLocalPath('../')).to.equal(true)
+    expect(isLocalPath('../../')).to.equal(true)
+    expect(isLocalPath('../template')).to.equal(true)
+    expect(isLocalPath('../template/abc')).to.equal(true)
+    expect(isLocalPath('./')).to.equal(true)
+    expect(isLocalPath('.')).to.equal(true)
+    expect(isLocalPath('c:/')).to.equal(true)
+    expect(isLocalPath('D:/')).to.equal(true)
+
+    expect(isLocalPath('webpack')).to.equal(false)
+    expect(isLocalPath('username/rep')).to.equal(false)
+    expect(isLocalPath('bitbucket:username/rep')).to.equal(false)
+  })
+
+  it('normalizes template path', () => {
+    expect(getTemplatePath('/')).to.equal('/')
+    expect(getTemplatePath('/absolute/path')).to.equal('/absolute/path')
+
+    expect(getTemplatePath('..')).to.equal(path.join(__dirname, '/../../..'))
+    expect(getTemplatePath('../template')).to.equal(path.join(__dirname, '/../../../template'))
+  })
+
+  it('points out the file in the error', done => {
+    monkeyPatchInquirer(answers)
+    generate('test', MOCK_ERROR, MOCK_TEMPLATE_BUILD_PATH, err => {
+      expect(err.message).to.match(/^\[readme\.md\] Parse error/)
+      done()
+    })
+  })
 })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

270916

increased by6.21%

Number of package files

59

increased by20.41%

Lines of code

1068

increased by26.99%

Number of lines in readme file

285

increased by28.38%

Worsened metrics

Dependency count

43

increased by2.38%

Dev dependency count

10

increased by25%

Dependency changes

• + Addedcopy-webpack-plugin@^4.0.1

• + Addedajv@5.5.2(transitive)

• + Addedaproba@1.2.0(transitive)

• + Addedcacache@10.0.4(transitive)

• + Addedchownr@1.1.4(transitive)

• + Addedcopy-concurrently@1.0.5(transitive)

• + Addedcopy-webpack-plugin@4.6.0(transitive)

• + Addedcyclist@1.0.2(transitive)

• + Addeddir-glob@2.2.2(transitive)

• + Addedextract-text-webpack-plugin@2.1.2(transitive)

• + Addedfast-deep-equal@1.1.0(transitive)

• + Addedfind-cache-dir@1.0.0(transitive)

• + Addedfind-up@2.1.0(transitive)

• + Addedflush-write-stream@1.1.1(transitive)

• + Addedfrom2@2.3.0(transitive)

• + Addedfs-write-stream-atomic@1.0.10(transitive)

• + Addedglobby@7.1.1(transitive)

• + Addediferr@0.1.5(transitive)

• + Addedignore@3.3.10(transitive)

• + Addedimurmurhash@0.1.4(transitive)

• + Addedjson-schema-traverse@0.3.1(transitive)

• + Addedlocate-path@2.0.0(transitive)

• + Addedmake-dir@1.3.0(transitive)

• + Addedmississippi@2.0.0(transitive)

• + Addedmove-concurrently@1.0.1(transitive)

• + Addedp-limit@1.3.0(transitive)

• + Addedp-locate@2.0.0(transitive)

• + Addedp-try@1.0.0(transitive)

• + Addedparallel-transform@1.2.0(transitive)

• + Addedpath-exists@3.0.0(transitive)

• + Addedpath-type@3.0.0(transitive)

• + Addedpify@3.0.0(transitive)

• + Addedpkg-dir@2.0.0(transitive)

• + Addedpromise-inflight@1.0.1(transitive)

• + Addedpump@2.0.1(transitive)

• + Addedpumpify@1.5.1(transitive)

• + Addedrun-queue@1.0.3(transitive)

• + Addedschema-utils@0.3.0(transitive)

• + Addedserialize-javascript@1.9.1(transitive)

• + Addedssri@5.3.0(transitive)

• + Addedstream-each@1.2.3(transitive)

• + Addedunique-filename@1.1.1(transitive)

• + Addedunique-slug@2.0.2(transitive)

• + Addedy18n@4.0.3(transitive)

• - Removedextract-text-webpack-plugin@2.0.0-beta.5(transitive)

• - Removedwebpack-sources@0.1.5(transitive)

• Updatedextract-text-webpack-plugin@^2.0.0-rc.3

• Updatedrimraf@^2.6.1