一起唱DoReMi: webpack

顯示具有 webpack 標籤的文章。顯示所有文章

2022年7月24日星期日

mocha + webpack 的 Vue3 元件單元測試

先說結論，我認為不適合用 mocha 進行 vue3 單元測試(@vue/test-utils)，反覆查了很久的資料，相關的套件支援度不足等有重重的障礙，根據 @vue/test-utils 目前提供的測試範例，選擇 Vitest 會更適合。

完整程式碼上傳至 Github (連結)。

一、安裝

首先，第一個問題就是 vue 的版本不能太新，目前只支援 3.0.7，因此對應安裝了相同版本的 @vue/server-renderer

npm install --save-dev @vue/server-renderer@3.0.7

再來請安裝 webpck 和 mocha，mochapack，mochapack 是用來讀取 webpack 設定將元件 render 出來的套件，可支援 webpack5 和 mocha 9

npm install --save-dev webpack mocha mochapack

其他有兩個類似的套件：

mocha-webpack: mocha: '>=4 <=5', webpack: '^4.0.0'
instant-mocha: mocha: '^6.1.4 || ^8.3.2', webpack: '^4.40.0 || ^5.0.0'

mochapack 是由 mocha-webpack 延伸而來的，三者用法都非常接近，但上述兩個對 webpack 和 mocha 版本的支援度都比 mochapack 差

再來請安裝 vue3 官方的元件測試套件 @vue/test-utils

npm install --save-dev @vue/test-utils

mocha 不像是 jest 已經內建支援 jsdom、assertion ，所以要另外安裝

npm install --save-dev webpack-node-externals jsdom-global
npm install --save-dev expect

二、設定

新增測試專用的 webpack 設定檔 webpack.config-test.js

// webpack.config-test.js

const nodeExternals = require('webpack-node-externals');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    mode: 'development',
    target: 'node',  // webpack should compile node compatible code
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
    devtool: 'inline-cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
};

設定 jsdom 設定檔 src/tests/setup.js

// src/tests/setup.js

require('jsdom-global')();

最後，請到 package.json 設定 script 指令

Usage: mochapack [options] [<file|directory|glob> ...]

Options
　--webpack-config　　path to webpack-config file
　--require, -r　　　　　require the given module

{
  "scripts": {
    "test": "npx mochapack --webpack-config webpack.config-test.js --require src/tests/setup.js src/tests/**/*.spec.js",
  }
}

三、執行

新增測試(範例請參考 Counter.spec.js)後,執行指令即可

npm run test

四、限制

1. 無法支援目前 vue 最新版本 3.2.37，發現底下錯誤訊息:

ReferenceError: SVGElement is not defined

2. 無法支援 SFC ，發現底下警告訊息:

[Vue warn]: Component is missing template or render function.

參考文件:

2022年1月23日星期日

webpack 常用 plugin 介紹 - HtmlWebpackPlugin 自動產生 Html

根據「[Vue.js] 如何建立 Vue3 + webpack5 專案範例」的內容，封裝時已經先建立目錄 dist/ ，新增 index.html，預先將 main.js 加到 script 中。

接著，以下要介紹 HtmlWebpackPlugin ，這個 webpack plugin 可以自動產生 Html，並自動將所有的 js 檔加入 script 中。下面的操作會用 [vue3-webpack5-template] 這個專案操作，可以先 clone下來並 npm install。

一、安裝

npm install html-webpack-plugin --save-dev

二、新增模板

新增 index.html ，並保留一些區域方便我們可以自訂。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
    </head>
    <body>
        <div id="<%= id %>"></div>
    </body>
</html>

三、新增 Webpack 設定

為了突顯 HtmlWebpackPlugin 功能的強大，首先刻意將輸出的 js 檔案名稱改為 [name].[contenthash].js，這時變得無法預期編譯後的檔案名稱。

再來將 HtmlWebpackPlugin 加入 plugin，完整檔案請點連結

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },

  ...

  plugins: [
    new HtmlWebpackPlugin({
      template: 'template/index.html',
      title: 'Getting Started',
      templateParameters: {
        id: 'app',
      },
    }),
  ],
};

上面共使用了三個參數：

1. template - 顧名思義是模板的路徑
2. title - html 檔案的 <title>
也說明為什麼在 index.html 有這一段

<%= htmlWebpackPlugin.options.title %>

3. templateParameters - 這裡傳入一個物件，將 id 訂為 app，因此模板這段程式碼，將會使用這裡的設定複寫

<div id="<%= id %>"></div>

若要了解更多參數的使用，可以參考文件。

四、執行

執行下面的指令開始打包

npm run build

程式碼已經 push 到分支test-webpack-plugin，或者參考變更可以按這裡。

2021年8月9日星期一

[Vue.js] 如何建立 Vue3 + webpack5 專案範例

以下說明如何使用 webpack5 打包 Vue3 專案，若尚未安裝 webpack5，可以參考「webpack5 安裝及基礎教學」。

一、安裝

需要安裝的套件如下，特別需要注意的是，在 Vue3 裡支援副檔名 .vue 的 single-file components 的套件，從 vue-template-compiler 變成 @vue/compiler-sfc：

vue
@vue/compiler-sfc
vue-loader
webpack
webpack-cli

請先新增專案，並在目錄內新增 package.json，並 npm 執行安裝。

  {

    "name": "vue3-webpack5-template",

    "version": "1.0.0",

    "description": "vue3-webpack5-template",

    "private": true,

    "scripts": {

        "build": "webpack"

    },

        "author": "chenuin",

    "license": "ISC",

    "devDependencies": {

      "@vue/compiler-sfc": "^3.1.5",

      "vue-loader": "^16.1.2",

      "webpack": "^5.49.0",

      "webpack-cli": "^4.7.2"

    },

    "dependencies": {

        "vue": "^3.1.5"

      }

    }

執行指令安裝：

npm install

二、設定打包的設定檔

首先針對 Vue 專案所設定的，Loader 可分為test、loader，前者是定義哪些檔案需要處理，像這裡就是副檔名為 .vue 的檔案；後者則是使用哪一個套件處理：

module: {

      rules: [

          {

              test: /\.vue$/,

              loader: 'vue-loader'

          },

      ],

  },

  plugins: [

        new VueLoaderPlugin(),

  ],

當專案內import vue 可以使用別名(alias)：

  resolve: {

      alias: {

          vue: 'vue/dist/vue.esm-bundler.js',

      },

  },

因此完整的 webpack.config.js 如下：

  const path = require('path');

  const { VueLoaderPlugin } = require('vue-loader');

  module.exports = {

      entry: './src/index.js',

      output: {

          filename: 'main.js',

          path: path.resolve(__dirname, 'dist'),

      },

      module: {

          rules: [

              {

                  test: /\.vue$/,

                  loader: 'vue-loader'

              },

          ],

      },

      resolve: {

          alias: {

              vue: 'vue/dist/vue.esm-bundler.js',

          },

      },

      plugins: [

          new VueLoaderPlugin(),

      ],

  };

三、新增Entry, Ouput等內容

在目錄內 src/ 新增兩個檔案:

Vue3 主要元件 App.vue

  <template>

    <div class="app">

      <p

        v-text="msg" />

    </div>

  </template>

  <script>

  export default {

      name: 'App',

      setup() {

        return {

          msg: 'Hello World!',

        };

      },

  };

  </script>

新增 Entry File: index.js
設定別名的用途可以看第一行 import App from './App.vue';。

import { createApp } from 'vue';

  import App from './App.vue';

  createApp(App)

      .mount('#app');

目錄 dist/ 則是新增 index.html，要注意的是先前 index.js 是綁定到 #app，所以 <div id="app"></div> 就是 vue render的地方。

  <!DOCTYPE html>

  <html>

      <head>

          <meta charset="utf-8" />

          <title>Getting Started</title>

      </head>

      <body>

            <div id="app"></div>

          <script src="./main.js"></script>

      </body>

  </html>

此時的專案架構應該會像是：

├── package.json
├── dist
│ └── index.html
└── src
├── App.vue
└── index.js

專案已經上傳 Github [vue3-webpack5-template]，可以下載使用。

四、執行

執行下面的指令開始打包

npm run build

完成後目錄 dist/ 下多了一個檔案 main.js，此時可以開啟 index.html ，看到 Hello World! 就代表打包成功囉！

2021年8月8日星期日

webpack5 安裝及基礎教學

根據維基百科：「Webpack 是一個開源的前端打包工具。Webpack 提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成優化過的程式碼。」，使用前必須安裝 Node.js。

webpack 從版本4.0.0開始，可以不需要設定設定檔(webpack.config.js)，設定檔最基本的設定分別是：Entry、Output，前者代表 webpack 必須從哪邊開始進行打包，後者則是定義封裝輸出的路徑以及檔案名稱。

以下參考官網簡單的範例，執行前請先安裝 Node.js，可以參考「安裝node js」替換成需要的版本。

一、安裝

請先新增一個專案目錄，並安裝 webpack、webpack-cli

mkdir webpack-demo

cd webpack-demo>

cd webpack-demo>

npm init -y>

npm install webpack webpack-cli --save-dev

此時目錄內應該會多一個 package.json 和 node_module/。

二、新增Entry module

新增目錄 src/，以及檔案 index.js

const element = document.createElement('div');

element.innerHTML = 'Hello World!';

document.body.appendChild(component());

三、新增Output

新增目錄 dist/，以及檔案 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

此時的專案架構應該會像是：

  webpack-demo

   |- package.json

   |- /dist

     |- index.html

   |- /src

       |- index.js

四、執行

執行下面的指令開始打包

npx webpack

完成後會發現目錄 dist/ 下多了一個檔案 main.js，此時可以開啟 index.html ，看到 Hello World! 就代表打包成功囉！

在沒有設定檔的情況下，webpack預設會尋找檔名 src 或是目錄 src/ 底下的 index，並將打包好的檔案放到目錄 dist/ 底下，預設檔名是 main.js，等同於：

const path = require('path');

  module.exports = {

    entry: './src/index.js',

    output: {

      filename: 'main.js',

      path: path.resolve(__dirname, 'dist'),

    },

  ;

可以透過指令來指定設定檔的路徑及名稱：

npx webpack --config webpack.config.js

範例還未使用Loader、Plugin等功能，在這個範例還未使用 css/image，也可以透過 Loader設定處理，webpack可以處理Javascript、Json，安裝loader可以讓webpack處理更多類型的檔案。另外在這個範例裡手動新增 index.html ，其實也可以透過相關的 Plugin 自動產生。

其他進階設定的功能可以參考 https://webpack.js.org/guides/getting-started/ 了解更多。

訂閱：文章 (Atom)

2022年7月24日 星期日

mocha + webpack 的 Vue3 元件單元測試

一、安裝

二、設定

三、執行

四、限制

2022年1月23日 星期日

webpack 常用 plugin 介紹 - HtmlWebpackPlugin 自動產生 Html

一、安裝

二、新增模板

三、新增 Webpack 設定

四、執行

2021年8月9日 星期一

[Vue.js] 如何建立 Vue3 + webpack5 專案範例

一、安裝

二、設定打包的設定檔

三、新增Entry, Ouput等內容

四、執行

2021年8月8日 星期日

webpack5 安裝及基礎教學

一、安裝

二、新增Entry module

三、新增Output

四、執行

2022年7月24日星期日

2022年1月23日星期日

2021年8月9日星期一

2021年8月8日星期日