一步步從頭搭建 Vue 開發(fā)環(huán)境

前言

由于是工具，很可能你看到的時候有些工具包已經(jīng)升級了，會有一些報錯；這個你就需要自己探索了。

工具的版本

1. node: v10.16.0
2. npm: v6.9.0
3. babel: 7.5.5
4. webpack: 4.38.0

入題

提醒：在我們開始之前，你先檢查下你相關(guān)工具的包是不是和我的一樣，以免報一些版本的錯誤。

首先我們先大致了解下一個完整的腳手架幫我們做了哪些工作：

1. ES6+ 語法轉(zhuǎn)換成 ES5 語法
2. .vue 轉(zhuǎn)換成 js 文件
3. 代碼熱更新
4. 加載各種靜態(tài)資源
5. 本地提供靜態(tài)服務(wù)……

你可以理解成腳手架幫我們完成了業(yè)務(wù)邏輯之外的大部分繁瑣的工程配置，讓我們能快速的進(jìn)入項(xiàng)目的開發(fā)。不過這似乎不利于個人的發(fā)展，我們作為有格局的前端，這些優(yōu)工程配置的工作我們也是需要了解的，要不然你又只能回家繼承幾十億的家產(chǎn)啦。

下面正式開始：

搭建 webpack 環(huán)境

webpack 簡單來說就是前端模塊化管理工具，這里不講就具體的用處，如果不懂 webpack 的話建議先學(xué)習(xí)官方文檔：https://www.webpackjs.com。

先確保你的項(xiàng)目中有 package.json 文件，如果沒有可以使用 npm init 來創(chuàng)建。

我們先安裝 webpack webpack-cli,安裝在 devDependencies。

npm?install?webpack?webpack-cli?--save-dev

三點(diǎn)解釋

--save 和 --save-dev 的區(qū)別

1. --save：將包安裝到 dependencies ，簡寫是?-S；
2. --save-dev：將包安裝到 devDependencies 簡寫是?-D。

dependencies 和 devDependencies 的區(qū)別

1. dependencies：運(yùn)行時的依賴，即這個模塊在生產(chǎn)環(huán)境下還需要使用；
2. devDependencies：開發(fā)時的依賴。即這個模塊只是在開發(fā)時使用。

webpack-cli 是什么

webpack4.0 后將 webpack-cli 從 webpack 中分離了出來，所以我們現(xiàn)在需要單獨(dú)安裝。

webpack-cli 為提供了一組靈活的命令，用于在設(shè)置自定義 webpack 項(xiàng)目時提高速度。也就是說你沒有安裝 webpack-cli，你是無法使用 webpack 命令的。

webpack 環(huán)境搭建成功了嗎？

現(xiàn)在看看 webpack 的環(huán)境是否搭建好了。

我們先新建一個文件?src/main.js：

//?main.js?文件代碼
const?name?=?'小生方勤';
let?hello?=?`hello?${name}`;

我們運(yùn)行以下命令后：

webpack?./src/main.js?--mode?development

發(fā)現(xiàn)項(xiàng)目中多了個?dist/main.js?文件，說明 webpack 環(huán)境算是安裝好了。

不過我們發(fā)現(xiàn)代碼還是使用的模板字面量語法（ES6 語法），這在部分瀏覽器是會報錯的。所以這個時候我們就需要 Babel 來幫助我們將 ES6+ 的語法轉(zhuǎn)換成瀏覽器可以識別的語法。

接下來我們就講講 Babel 的配置。

為項(xiàng)目配置 Babel

如果你想了解下 Babel，你可以看看之前寫的文章 關(guān)于 Babel 你必須知道的。

我們先安裝相關(guān)依賴包：

npm?install?babel-loader?@babel/core?@babel/preset-env?-D

我們新建一個?build/webpack.config.js?文件并做出如下配置( 配置 babel-loader )：

const?path?=?require('path')

module.exports?=?{
????mode:?'development',
????entry:?{
????????//?入口文件
????????main:?path.resolve(__dirname,"../src/main.js")
????},
????output:?{
????????//?打包后文件輸出的目錄
????????path:?path.resolve(__dirname,'../dist'),
????????filename:?'js/[name].[hash:8].js'
????},
????module:?{
????????rules:?[
????????????{
????????????????test:?/\.js$/,
????????????????exclude:?/node_modules/,?//?加快處理速度
????????????????use:?[
????????????????????{
????????????????????????loader:?'babel-loader'
????????????????????}
????????????????]
????????????}
????????]
????}
}

然后我們在根目錄新建一個文件?babel.config.js?并做出如下配置：

module.exports?=?{???
????presets:?[
????????"@babel/env",
????]
};

我們再打包試試，你會發(fā)現(xiàn)已經(jīng)轉(zhuǎn)成 ES5 的語法了：

不過當(dāng)你使用一些瀏覽器不能識別的語法的時候打包的時候就會報錯，比如我們代碼中使用了?Set():

下面我們就配置 @babel/polyfill。

按需引入 @babel/polyfill

先安裝：

npm?install?@babel/polyfill?-S

然后我們在根目錄新建一個文件?babel.config.js?并做出如下配置：

module.exports?=?{???
????presets:?[
????????[
????????????"@babel/env",
????????????{
????????????????useBuiltIns:?"usage",??//?按需加載?@babel/polyfill
????????????},
????????],
????]
};

這樣配置后，打包出來的文件就只是僅僅打包了 polyfill 代碼中需要使用的那部分，打包后的體積也大大減少了。

按需加載后文件體積小了 360KB 左右。

小提示: 打包生成的文件是不會自動刪除的，需要我們配置 clean-webpack-plugin 插件。

接下來我們開始引入 Vue。

引入 Vue

我們先安裝相關(guān)的包：

npm?install?vue?-S
npm?install?vue-loader?vue-template-compiler?-D

現(xiàn)在項(xiàng)目目錄大概是這樣的：

然后我們將 main.js 代碼改成：

import?Vue?from?'vue'
import?App?from?'./App.vue'

const?root?=?document.createElement('div')
document.body.appendChild(root)

new?Vue({
????render:?h?=>?h(App)
}).$mount(root)

因?yàn)橐С?.vue 文件，所以為我們在 webpack 也需要做相關(guān)的配置，即在 webpack.config.js 做如下配置；

...
module:?{
????rules:?[
????????{
????????????test:?/\.vue$/,
????????????loader:?'vue-loader'
????????}
????]
},
...

注意：vue-loader 在 15.* 之后的版本使用 vue-loader 都是需要依賴 VueLoaderPlugin 的，具體配置見源碼。

做到這里是不是想看看這段代碼在瀏覽器的運(yùn)行結(jié)果呢？OK 我們繼續(xù)配置。

配置 html-webpack-plugin 和 devServer

配置 html-webpack-plugin

npm?install?html-webpack-plugin?-D

我們在根目錄新建一個 index.html 文件，然后還是配置 webpack.config.js 文件；

plugins:?[
????new?CleanWebpackPlugin(),???//?清除?dist?的文件
????new?VueLoaderPlugin(),
????new?HtmlWebpackPlugin({
????????filename:?'index.html',
????????template:?'index.html',
????????inject:?true
????}),
]

打包后 dist 就會多一個 index.html 文件:

我們發(fā)現(xiàn)打包后的文件自動插入了 index.html 模板，并生成了一個新的 index.html 文件，細(xì)心的朋友應(yīng)該看到了所有的文件都合并在 main.js 了，等下我就說說該如何把這個文件分開；在之前我們先看看如何實(shí)現(xiàn)開發(fā)環(huán)境熱更新。

配置 devServer

先安裝包:

npm?install?webpack-dev-server?-D

還是在 webpack.config.js 添加配置：

devServer:?{
????host:?'localhost',
????port:?8080,
????hot:?true,?//?熱更新
},
plugins:?[
????//?剩略了部分代碼，詳細(xì)的請看源碼
????new?webpack.HotModuleReplacementPlugin(),
????new?webpack.NamedModulesPlugin()
]

然后我們在 package.json 加上一條命令：

"dev":?"webpack-dev-server?--config?./build/webpack.config.js"

接著我們就可以運(yùn)行?npm run dev,我們直接看效果：

到這里我們的項(xiàng)目基本配置都有了，項(xiàng)目已經(jīng)可以跑起來啦。

再聲明下：實(shí)際項(xiàng)目中還是使用腳手架為好，這樣可以避免很多繁瑣的配置。不過項(xiàng)目到底是如何搭建的，我們還是需要了解的；這個過程其實(shí)沒有什么太多的難點(diǎn)。

參考：

1. webpack 官方文檔：https://www.webpackjs.com
2. node 官方文檔：https://nodejs.org/zh-cn/docs/
3. babel 官方文檔：https://www.babeljs.cn/