脚手架搭建遇到的问题

最近查看了vuejs-template的源码，并仿照源码写了一个小型npm run dev时的脚手架，但是中途也遇到了一些问题，记录一下

首先说一下vue-cli里面用到的npm包以及它的作用(全部可以在 https://www.npmjs.com/package/package 查询到)：

• opn 强制打开浏览器

  var opn = require('opn')
  opn(uri)
  

• path 用于路径解析，使用方法可以详见 node之path

• express 服务器框架

  var express = require('express')
  var app = express()
  
  app.use(中间件)
  app.listen(port, function	(err) {
  	// TODO
  })
  

• webpack 打包工具

  var compiler = webpack(webpackConfig)
  // compiler为webpack编译好的文件
  

• webpack-dev-middleware webpack中间件，用于将编译好的文件存入内存

  var devMiddleware = require('webpack-dev-middleware')(compiler, {
  	publicPath: webpackConfig.output.publicPath, // 访问路径
  	quiet: true // 不打印
  })
  devMiddleware.waitUntilValid(() => {
  	console.log(`Listening at ${url}`)
  })
  

• webpack-hot-middleware webpack热重载插件

  var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  	log: false,
  	heartbeat: 2000 // 多久更新一次客户端
  })
  
  

然后说一下遇到的问题

1. import Vue from vue 之后浏览器报错 Vue is not defined

   原因： 我为了防止一个页面多次引用vue文件，在 webpack.base.conf.js 文件里面设置了externals 属性externals: {'vue': 'Vue' }，之后import Vue from 'vue'时不会在从node_modules里面引入，而是会直接在全局找到Vue并赋值给vue。 这样只要需要在html里面引入vue文件之后用了，但是由于我开始没有在html中加入vue文件导致找不到全局的Vue所以会报错。

   解决： 一种方法是去掉externals属性，另一种方法是在html使用script标签引入vue.js文件

2. development is not defined

**原因：** `webpack.DefinePlugin` 中会将NODE_ENV直接变为development

**解决：** 要使用字符串，需要在配置时`{NODE_ENV: '"development"'}`