腳手架搭建遇到的問題

最近查看了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"'}