背景概述
鑑於筆者多次搭建,又常常比較難記住,到處翻查資料,特別浪費時間,所以對自己所學習的知識做一個小小的總結,方便日後的開發的時候使用。本文建立在你已經熟悉vue的前提下,但是對基本步驟並不是很容易就能夠想起來的情況下。
代碼所在地址。網址是正常的,可以放心訪問,只是一個代碼倉庫而已。
https://gitee.com/blueboz/vue-demo/tree/master
基本搭建步驟
1.創建空項目
2.項目上使用npm 初始化
這一步驟只是所有npm項目的常規初始化
npm init -y
3.安裝webpack
安裝webpack , 命令行工具,可以讓我們在命令行使用webpack進行打包,以及webpack-dev-server,方便我們在開發的時候,直接進行熱部署
npm i webpack webpack-cli webpack-dev-server -D
在項目根目錄下
var path = require('path');
var webpack = require('webpack');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
contentBase:'./dist',
hot:true,
port:3000
},
plugins: []
}
package.json文件中添加如下內容,這樣子,便可以使用npm run dev 進行運行,以及npm run build 進行打包
"scripts": {
"dev": "webpack-dev-server --open --hot",
"build": "webpack --progress --hide-modules"
}
這時候,如果啓動npm run dev會爲我們打開一個界面,提示如下錯誤。那麼現在,我們需要提供一些js腳本,來豐富我們的功能,以及一些插件爲我們提供支持。
小Tips
在package.json文件上點擊右鍵,show npm Scripts,會出現一個npm 面板
4.安裝必要的插件(css,js,png,html)
- (*.html) html-webpack-plugin
- (*.css) style-loader css-loader
- (*.less) less less-loader
- (.sass/.scss) node-sass sass-loader(不作介紹)
- (*.js) babel-loader@7 babel-core babel-preset-env(babel-preset-es2015, es2016, es2017)
- (*.js) babel-polyfill |babel-runtime,babel-transform-runtime
第1 步驟,先建立index.html 與index.js 文件
筆者的index.js文件中,使用了es6的箭頭函數,以及Generator函數,目地是爲了後面引出Babel 的使用作鋪墊。
第1步,處理html模板文件
npm i html-webpack-plugin -D
然後在,webpack.config.js文件的plugins中添加,表示,以src目錄下的index.html作爲模板,並且在這個html文件的最後,追加bundle.js腳本的引用。
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
})
這個使用使用npm run dev
是可以預覽到頁面應該有的效果(使用Chrome 或者火狐,不要用IE)
第二步驟支持css樣式的使用
npm i style-loader css-loader -D
然後在webpack.config.js文件中添加,
plugins:[],
module: {
rules: [
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
然後就支持了css了,
第三步驟,支持less
npm i less less-loader -D
rules中添加
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
第四步驟、支持jpg,png ,ttf等
npm i file-loader -D
同樣的,在rules裏面添加如下
{
test:/\.(png|svg|jpg|gif)$/,
use:['file-loader']
},{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:['file-loader']
}
到了這一步,我們已經支持了css,less,html,字體資源,圖片等等,
看似順利,氣死不然,如果現在,你使用一些低端的瀏覽器打開我們的頁面,你會驚奇的發現頁面沒有正常打開,這是因爲,我們的index.js腳本里面應用了很多的es6的語法,如let ,class ,以及Generator 函數。
那麼我們應該怎麼支持這些新語法呢?答案是我們下面要引入的babel。
第五步驟,引入Babel
目前的Babel已經支持到了7 ,與Babel6 的不同大概是插件包的名稱叫法的改變而已,
舉個例子來說,babel 有幾大核心的組件
babel-core,babel-preset-env,babel-loader,在babel 6中,安裝這幾個插件的命令
是
npm i babel-core babel-preset-env babel-loader@7
但是在babel7 中是使用
npm i @babel/core @babel/preset-env babel-loader@8
只是名稱的改變而已,實質上沒有太大的區別。
作爲樣例,我們這裏使用babel6來舉例子。配置上的不同我也會指出來。
步驟a.安裝基礎包
npm i babel-cli -g
npm i babel-core babel-preset-env babel-loader@7 -D
babel-core提供一些核心的API接口給我們,可以通過如下代碼導入工具包
var babel = require("@babel/core");
import { transform } from "@babel/core";
import * as babel from "@babel/core";
然後調用babel 的一些方法進行轉化,詳細信息可以參考官方對該插件的描述內容。https://babeljs.io/docs/en/next/babel-core.html
babel-cli 是幹嘛的,提提供一個babel終端工具,可以讓我們自己編譯js文件
一般建議全局安裝,使用辦法是
babel index.js --out-dir lib -options
對於babel-preset-env 這個工具包,我們還得從其他插件談起,由於babel對代碼的轉化都是基於插件的,也就是plugins,這意味着,對於箭頭函數,就會有一個插件用於轉化箭頭函數的。確實如此,如下地址就是對該插件的描述
https://babeljs.io/docs/en/next/babel-plugin-transform-arrow-functions.html
問題來了,那麼如果要轉化class關鍵字,generator函數呢?
確實也是有的,如下兩個地址分別是class轉化函數與generator轉化函數的描述。
https://babeljs.io/docs/en/next/babel-plugin-transform-classes.html
https://babeljs.io/docs/en/next/babel-plugin-transform-regenerator.html
對與每一個插件,我們需要在
.babelrc文件裏面,添加類似的,這樣會導致我們的plugins變得龐大
上圖的插件配置引自babel7 ,看不懂的話把@去掉,"/“替換成”-" 就是完整的插件名稱了。
而preset-env這個插件,即是爲了整合而出現的,使用這個preset-env,我們就沒有必要一個一個引用了。只需要引入preset-env這一個預置的插件即可
最後一個是babel-loader ,這個應該算是一箇中間的媒介,作爲webpack打包的規範工具,我們知道,作爲webpack 來說,babel是一個未知的東西,對於webpack在打包js文件的時候,他並不知道箭頭函數應該怎麼處理,巧的是,babel知道,但是,webpack應該怎麼讓babel幫他轉化呢,答案是,實現webpack的rules中的插件,在處理js的時候,調用babel插件,這就是babel-loader的作用了。
注意要在webpack.config.js文件中添加如下代碼
{
test:/\.js$/,
use:['babel-loader'],
exclude:/node_modules/
}
來說說.babelrc ,這個文件一共分爲兩種配置
presets和plugins,這個我們之前也有簡單的提過,preset 一般是一些一體包,一般包含許多的插件,而plugins 是單獨一個插件的配置。
{
"presets": [
["env",{
"targets": {
"browsers": ["> 1%", "last 2 versions"]
}
}]
]
}
一切看似差不多了,那麼我們可以使用babel 編譯一下,看看我們編譯完之後,腳本是什麼樣子
babel src\index.js --out-dir lib
你會驚奇的發現,我們寫的箭頭函數,變成了這樣子了。這正好是低級瀏覽器所支持的。
class關鍵字,被轉化成了調用_createClass公共方法了。
這個時候,我們新建一個index.html 引用我們生成的腳本,這個時候,一開始正常的界面反而不正常了。
還報錯了,這是因爲我們使用generator函數裏面調用了regeneratorRuntime這個一個實體類,這個實體類需要引用一個基礎包。這也就引入我們下一步的動作
步驟b.安裝babel-polyfill 或babel-runtime,babel-transform-runtime
這裏有2個選擇,依賴babel-poly ,這個提供了一些高級語法轉化過程中,使用到的一些依賴包,
我們先試試這個。
npm i babel-polyfill -S
然後又有2中方法引入
第一種,在index.js文件中通過如下代碼進行依賴
import 'babel-polyfill'
第二種,在webpack.config.js中添加如下的entry也可以實現。
entry: ['babel-polyfill','./src/index.js'],
現在,讓我們啓動一下我們的網站,在IE裏面,可以發現頁面也可以打開了,到這一步,你是不是認爲就可以了,其實,不然,因爲上一步,我們需要在腳本里面引入babel-poly,實際對我們的代碼已經產生了侵犯,污染變量
第二種選擇是使用插件方式,這個插件,會對一些公共方法進行抽取,同時提供類似polyfilll的功能。
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
並且將如下代碼加入.babelrc,記住去掉我們上一步加的polyfill的哪些代碼
{
"plugins": ["transform-runtime"]
}
使用babel命令再次編譯,可以看到編譯之後,代碼裏面爲我們依賴了_regenerator ,這個正是上一步驟中,我們使用polyfill引入的,通過require方式引入,減少了對變量的污染。此外,像createClass方法,都被抽取babel-runtime裏面,這裏也很好的解釋了babel-runtime包的作用!,此外,transform-runtime作爲一個插件被使用,他有什麼功能?他具體也是一個代碼轉化插件包,與babel-runtime 不同的是,他是提供轉化代碼工具,不在運行時使用,而babel-runtime提供的 是一些需要在程序運行時需要使用的公共包。
這裏存在着一個坑。https://mp.csdn.net/mdeditor/98637033#
參考我的另一篇文章。
到了目前的這一步,我們算是解決了一堆的前設條件,接下來是支持vue
前面的,npm un babel-polyfill卸載掉polyfill,這個可以看你的喜好,如果你喜歡polyfill可以把babel-runtime /transformer給卸載掉,並去掉配置,留一個就好了,當然你想2個留着也可以,自己參考官方文檔,看看他們的整合配置,可以說polyfill功能比runtime小,因爲runtime還提供一些基礎方法的抽離。這點也是我建議用runtime 的原因所在。
5. 安裝vue
npm i vue -S
npm i vue-style-loader -D
vue插件提供了我們寫代碼的時候的依賴
import Vue from 'vue'
new Vue({
el:"#app"
})
同時,打開我們之前的webpack.config.js文件,修改裏面的style-loader爲vue-style-loader,這個插件(vue-style-loader)會幫我們處理一些vue控件裏面的樣式設置。
6.這個時候,我們又出現了2條分支
安裝了vue 之後,呢,此時,如果你採用傳統的開發方式(不建議)在我們的Vue實例裏面填寫一些方法,然後界面上渲染之類的,你會發現並不行。
這是因爲,我們通過Import導入的vue是一個不完整的版本。
那這個時候要怎麼辦?簡單,引入完整的不就得了。
當然,你如果不想這麼做,像在webpack.config.js裏面
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
也是可以的。
剛剛上面我們說到2個分支。那麼另外一條分支是啥。另外一條分支是使用*.vue結尾的文件。
使用vue結尾的文件,我們第一時間就會想到轉化器,也就是webpack轉化器,那麼就得再安裝插件了。
npm i vue-loader vue-template-compiler -D
裝完之後,進入webpack.config.js配置文件
{
test: /\.vue$/,
loader: 'vue-loader'
},
在webpack.config.js中
引入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
然後在plugins裏面添加如下代碼
這個時候,我們的首頁的內容如下,這裏需要注意,導入vue的時候,是使用vue而不是vue.min.js,因爲這樣會導致出問題的
打開界面,成功訪問,那麼這時候,vue也算是搭建ok了。此外如果你希望使用vue-router 的話。可以通過如下代碼引入
npm install vue-router --save-dev
然後就可以使用路由了。
支持MintUI
1.通過如下命令進行安裝
npm i mint-ui -S
2.全局導入法
全局導入然後就可以在頁面中隨便使用了。但是我們採用另外一種方式,按需導入
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
然後你就可以在我們的頁面中隨意的引用。
3.按需導入法
按需導入可以減少打包的bundle.js文件的體積,這個在線上環境來說是很有幫助的。
做法稍微麻煩了一點點。還需要安裝babel的一個插件,這個插件將會爲我們按需導入提供幫助。
a.安裝插件
npm install babel-plugin-component -D
b.修改.babelrc
在.babelrc文件中添加如下片段,可以理解爲添加了component插件,並且針對了這個插件進行了配置。
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
針對本例子,由於我們在前面使用了transform-runtime,所以在這裏我們會多一個插件
後記
作爲平常我們的項目開發中,需求快速開發會讓我們失去了對本質的瞭解,我們要學會跳脫開日常開發的瑣碎,理解到技術的根本,才能在技術的道路上越走越遠。
至此,我們的項目搭建全部內容也就完畢。創作不易,喜歡的讀者可以支持一下筆者。