靈活使用vue單文件組件之--最少配置打包.vue組件

時間 2019-11-06

標籤靈活使用 vue 文件組件最少配置打包简体版

原文原文鏈接

對於vue單文件組件的使用，咱們知道使用vue-cli能夠快速生成項目結構，進行.vue單文件組件的編寫，使用 npm run build命令會從main.js開始打包項目中的依賴(一般main.js中引用App.vue，做爲頁面最高層級的組件，咱們本身寫的組件會在App.vue中引用)，build的結果會生成打包好的靜態js/css文件以及index.html，這對於寫單頁應用來講很是方便，可是，變化的需求老是不少的~css

若是我只想在html頁面裏用到我寫的vue組件（同時我的也更加偏向使用html頁面的寫法），而不是構建一整個單頁應用，在vue-cli裏能夠嗎？？？固然能夠作到，瞭解其中的配置，修改爲本身想要的樣子，咱們能夠作到只打包一個組件的效果。html

可是，面對辣麼多的配置文件，仍是從0開始本身來吧，畢竟我只想打包一個.vue組件。在正式開始寫示例代碼以前，爲了文章的完整性，先簡單介紹一下幾個工具。vue

webpack

webpack是幹嗎的？他是一個模塊打包器，他的目標就是將JavaScript文件都打包到一塊兒，用於在瀏覽器中使用，便可以經過<script>標籤加載。
換句話說，webpack其實只認識js文件，那咱們其餘類型的文件怎麼辦？這裏就要用到loader，loader 能夠將文件從不一樣的語言（如 TypeScript）轉換爲 JavaScript，能夠用來處理圖片、轉換sass/less爲純css等，一句話，就是用於文件或資源被webpack加載打包前的預處理。webpack

這裏想一下咱們的需求，咱們想要打包一個vue組件，使用webpack，根據上面的說明，不難想到還應該須要一個loader能夠用來識別並轉換.vue文件，so：web

vue-loader

一句話，就是把按下面格式的編寫的vue組件轉換爲js模塊。至於轉換後會成爲何，下面會說到。end。vue-cli

<template></template>
<script></script>
<style></style>

如今正式開始

先創建一個文件夾：testproject;
命令行進入到testproject ,運行 npm init,根據命令行提示，進行項目的一些初始化操做;

完成以後，咱們的項目中就會有package.json文件，打開package.json，配置打包須要的一些dependence，這裏我就是從一個vue-cli項目的package.json文件中拷過來一些基本的依賴，以下：
其中dependencies裏就是拷過來依賴的部分npm

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.4",
    "css-loader": "^0.28.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "file-loader": "^1.1.4"
  }
}

運行 npm install,稍等片刻，咱們須要的模塊就ok了。
這裏說明一下，npm包之間也存在依賴關係，若是存在有‘依賴的依賴’ 你沒有寫到配置的dependencies中，命令行會有提示，注意看。爲何說這個，由於我在拷貝依賴的時候，就略過了‘file-loader’，
so sad.^_^json

如今能夠寫咱們的示例內容了，這裏咱們設定咱們要寫的組件爲hello.vue，組件打包後的名字叫hellobundle.js,咱們在sayhello.html中要引用的組件就是打包後的hellobundle.js，直接在testproject目錄下新建相關文件，內容以下：瀏覽器

<!--sayhello.html-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="./hellobundle.js"></script>
</head>
<body>
<div id="app">
  <hello></hello>
</div>
<script>
  var vm=new Vue({
    el:'#app',
    components:{
      hello:hello.default    //這裏咱們後面會解釋爲何這樣寫
    }
  })
</script>
</body>
</html>

<!--hello.vue-->
<template>
  <h1>{{text}}</h1>
</template>
<script>
  export default{
    name:'hello',
    data:function() {
      return  {
        text:'hello~~~'
      }
    }
  }
</script>
<style>
  h1{
    color: #ffb93f;
  }
</style>

很簡單的內容，如今咱們想要打包hello.vue這個組件，對於打包咱們選擇使用script命令+webpack.config.js的方式（這裏不瞭解能夠移至webpack官方指南，說明很詳細），仍是在根目錄，新建webpack.config.js文件，內容以下：sass

//webpack.config.js
const path = require('path')
module.exports = {
  entry  : './hello.vue',             //入口文件
  output : {
    filename : 'hellobundle.js',     //出口文件名
    path     : path.resolve(__dirname),    //當前目錄
    library  : 'hello'       // 打包後模塊的名稱
  },
  module : {     
    rules : [    //定義不一樣類型的文件使用的loader
      {
        test   : /\.vue$/,
        loader : 'vue-loader'
      },
      {
        test   : /\.js$/,
        loader : 'babel-loader'
      }
    ]
  }
}

這裏差很少是最簡化的配置，hello.vue做爲咱們打包的入口文件，配置出口文件的名稱、路徑以及最終模塊對外的名稱，寫好了這個，再在package.json中加上一條script命令，以下：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"     //<-------就四這行，，
  },

寫好了.vue組件文件、webpack的配置文件，如今咱們運行npm run build, 結果以下：

在testproject目錄下，咱們也如願獲得了hello.vue打包後的hellobundle.js，整個testproject結果以下

終於，咱們能夠來驗證這個打包後的hellobundle.js是否可用了，在瀏覽器打開sayhello.html:

ofcourse you can see yellow hello,,這裏說一下咱們的sayhello頁面中，註冊組件時用到的是：
components:{

hello:hello.default    //這裏咱們後面會解釋爲何這樣寫
}

其實在一開始的時候，我用的是webpack配置的hello變量，而後打開sayhello頁面時並無出現預期的效果，因而在控制檯打印了一下咱們hellobundle.js輸出的hello變量：

so,就更正了一下hello的引用。

結語

本着最簡原則，示例中的項目結構沒有按照src/dist這樣規範的目錄結構來寫，寫到這一步以後，咱們能夠繼續深刻完善咱們的打包功能，對webpack使用命令行參數動態打包文件、hot-reloading等，這樣的話，就又複雜了，再也不贅述。--end 歡迎指正^_^

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。