vue cli4構建基於typescript的vue元件併發布到npm

鄒瓊俊發表於2020-08-03
VueTypeScript元件NPM

基於vue cli建立一個vue專案

　　首先安裝最新的vue cli腳手架，

　　npm install --global @vue/cli

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @vue/cli@4.4.6
added 1230 packages from 670 contributors in 118.122s

　　檢視安裝的vue -V

@vue/cli 4.4.6

 　　建立專案：vue create my-project-name（“my-project-name”，這個可以根據需要命名，儘量用英文）

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: ts_tmpl

　　建立完成之後，會出現如下提示

⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project my-project-name.
�  Get started with the following commands:

 $ cd my-project-name
 $ npm run serve

　　根據提示執行命令

E:\vue_codes>cd my-project-name

E:\vue_codes\my-project-name>npm run serve

> my-project-name@0.1.0 serve E:\vue_codes\my-project-name
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 DONE  Compiled successfully in 5304ms                                                                      上午11:13:54

No type errors found
Version: typescript 3.9.7
Time: 3160ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.95:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

　　在瀏覽器輸入地址：http://localhost:8080/

　　出現如上圖所示介面，表示專案建立成功了。

 　　生成的程式碼目錄結構如下：

 　　兩個宣告檔案：shims-vue.d.ts和shims.tsx.d.ts

　　shims-vue.d.ts：由於 TypeScript 預設並不支援 *.vue 字尾的檔案，所以在 vue 專案中引入的時候需要建立一個shims-vue.d.ts 檔案，放在專案專案對應使用目錄下，例如 src/shims-vue.d.ts，用來支援*.vue 字尾的檔案

　　shims-tsx.d.ts：允許.tsx 結尾的檔案，在 Vue 專案中編寫 jsx 程式碼

　　tsconfig.json：typescript配置檔案,主要用於指定待編譯的檔案和定義編譯選項

　　normalize.css：Normalize.css 是一個可以定製的CSS檔案，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一。Normalize.css是一種CSS reset的替代方案。

　　.browserslistrc：這個配置能夠分享目標瀏覽器和nodejs版本在不同的前端工具。這些工具能根據目標瀏覽器自動來進行配置，Browserslist這個東西單獨是沒用的，（補充: 在vue官方腳手架中，browserslist欄位會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉譯的 JavaScript 特性和需要新增的 CSS 瀏覽器字首。）

 　　browserslist的配置檔案：
　　> 1% 相容全球使用率大於1%的遊覽器
　　last 2 versions 相容每個遊覽器的最近兩個版本
　　not ie <= 8 不相容ie8及以下
　　具體可見 browserslist。

　　babel.config.js：Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的程式碼轉換為向後相容的 JavaScript 語法，以便能夠執行在當前和舊版本的瀏覽器或其他環境中。
　　postcss.config.js：用於配置將px轉化成rem，和自動新增CSS瀏覽器字首等。
　　esnext 是一個 JavaScript 庫，可以將 ES6 草案規範語法轉成今天的 JavaScript 語法。

改造專案結構

　　這種元件專案和我們日常的專案還是有很大區別的，由於前面我採用的是vue cli建立的完整模板專案，這裡許多東西用不到，我們就將其刪掉，最終專案目錄結構如下：

 　　examples：是元件使用示例

　　src/components：是元件原始碼

　　package.json程式碼如下：

{
  "name": "jie-echarts",
  "version": "0.1.0",
  "private": false,
  "description": "echarts元件",
  "main": "dist/JieEcharts.common.js",
  "author": "zouqj<zouyujie@126.com>",
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name JieEcharts ./src/index.ts"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zouyujie/vue-components/tree/master/jie-echarts"
  },
  "bugs": {
    "url": "https://github.com/zouyujie/vue-components/issues"
  },
  "homepage": "https://github.com/zouyujie/vue-components/tree/master/jie-echarts",
  "keywords": [
    "vue",
    "vuejs",
    "typescript",
    "vuecli4.x"
  ],
  "dependencies": {
    "core-js": "^3.6.5",
    "echarts": "^4.8.0",
    "ts-loader": "^8.0.1",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@types/echarts": "^4.6.4",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-typescript": "~4.4.0",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-template-compiler": "^2.6.11"
  }
}

　　重點注意標紅部分的配置。

　　tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "typeRoots": ["/@types", "./node_modules/@types"],
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

　　vue.config.js程式碼如下：

'use strict';
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const resolve = (dir) => path.resolve(__dirname, dir);
module.exports = {
  // 修改 src 目錄 為 examples 目錄
  pages: {
    index: {
      entry: 'examples/main.ts',
      template: 'public/index.html',
      filename: 'index.html',
    },
  },
  // vue 通過 file-loader 用版本雜湊值和正確的公共基礎路徑來決定最終的圖片路徑，再用 url-loader 將小於 4kb 的
  // 圖片內聯，以減少 HTTP 請求的數量。所以我們可以通過 chainWebpack 調整圖片的大小限制。例如，我們將
  // 圖片大小限制設定為 13kb，低於13kb的圖片全部被內聯，高於13kb的圖片會放在單獨的img資料夾中。
  chainWebpack: (config) => {
    const imagesRule = config.module.rule('images');
    imagesRule
      .use('url-loader')
      .loader('url-loader')
      .tap((options) => Object.assign(options, { limit: 13312 }));
  },
  // 設定css: { extract: false },可以強制內聯，就不會將css單獨打包成一個檔案，導致頁面沒有style
  css: { extract: false },
  productionSourceMap: false,
};

　 說明：UglifyJS Webpack Plugin外掛用來縮小（壓縮優化）js檔案，修改應用入口檔案，examples/main.ts，方便執行npm run serve的時候，可以直接檢視元件的示例。

　.npmignore可以將一些不需要釋出到npm的檔案忽略掉，.npmignore配置如下：

.*
package-lock.json
/.git/
/.vscode/
tslint.json
tsconfig.json
*.log

.DS_Store
/dist
/examples
/node_modules
/public
/src
/tests
.browserslistrc
jest.config.js
vue.config.js

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
.gitignore
.npmignore
.npmrc
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

　　components下面

　　index.ts程式碼，以外掛的形式進行封裝，方便全域性引用：

import jieEcharts from './jie-echarts.vue';

(jieEcharts as any).install = (Vue: any) => {
  Vue.component(jieEcharts.name, jieEcharts);
};

export default jieEcharts;

　　jie-echarts.vue，是元件原始碼，程式碼：

<template>
  <!-- 每一個圖表都有自己唯一的id,需要動態傳入。 -->
  <div :ref="id" :id="id" :class="myclass" :style="style" />
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import Echarts from "echarts";
@Component({
  name: "jie-echarts"
})
export default class extends Vue {
  @Prop({ default: "myCharts" }) private id!: string;
  @Prop({ default: "100%" }) private width!: string;
  @Prop({ default: "200px" }) private height!: string;
  @Prop({ default: "echarts-line" }) private myclass!: string;
  @Prop() private options!: object;
  @Prop({ default: false }) private loading!: boolean;

  private MyEcharts: any = null; // echarts例項

  created() {
    console.log("this.options :>> ", this.options);
  }
  mounted() {
    this.InitCharts();
  }

  get style() {
    return {
      height: this.height,
      width: this.width
    };
  }
  @Watch("options", { deep: true })
  onChangeOption(newVal: string, oldVal: string) {
    if (this.MyEcharts) {
      if (newVal) {
        // console.log(JSON.stringify(newVal))
        this.MyEcharts.setOption(newVal, true);
      } else {
        this.MyEcharts.setOption(oldVal, true);
      }
      setTimeout(() => {
        this.MyEcharts.resize();
      });
    } else {
      this.InitCharts();
    }
  }
  @Watch("height")
  onChangeHeight(val: string) {
    if (val) {
      this.height = val;
    }
    if (this.MyEcharts) {
      this.MyEcharts.setOption(this.options, true);
    } else {
      this.InitCharts();
    }
  }
  @Watch("loading")
  onChangeLoading(val: boolean) {
    if (val == true) {
      this.showLoading();
    }
    if (val == false) {
      this.hideLoading();
    }
  }
  //-----------------------method----------------------
  // 元件初始化
  private InitCharts() {
    const dom: any = this.$refs[this.id] as HTMLDivElement; // document.getElementById(this.id);
    this.MyEcharts = Echarts.init(dom);
    if (this.loading == true) {
      this.showLoading();
    }
    /**
     * 此方法適用於所有專案的圖表，但是每個配置都需要在父元件傳進來，相當於每個圖表的配置都需要寫一遍，不是特別的省程式碼，主要是靈活度高
     * echarts的配置項，你可以直接在外邊配置好，直接扔進來一個this.option
     */
    this.MyEcharts.clear(); // 適用於大資料量的切換時圖表繪製錯誤,先清空在重繪
    this.MyEcharts.setOption(this.options, true); // 設定為true可以是圖表切換資料時重新渲染
    setTimeout(() => {
      this.MyEcharts.resize();
    });
    // 當視窗變化時隨瀏覽器大小而改變
    window.addEventListener("resize", () => {
      this.MyEcharts.resize();
    });
    this.MyEcharts.on("click", (params: any) => {
      this.mapClick(params);
    });
  }
  //元件單擊事件
  private mapClick(params: any) {
    // console.log(params, 999999);
    const data = {
      color: params.color,
      data: params.data,
      dataIndex: params.dataIndex,
      seriesIndex: params.seriesIndex,
      chartType: params.componentSubType
    };
    this.$parent.$emit("chartParams", JSON.stringify(data));
    if (params.seriesType == "map") {
      this.$emit("mapValue", params.name);
    } 
      this.$emit("eclick", params);
  }
  private showLoading() {
    if (this.MyEcharts) {
      this.MyEcharts.showLoading({
        text: "loading"
        // color: '#4cbbff',
        // textColor: '#4cbbff',
      });
    }
  }
  private hideLoading() {
    if (this.MyEcharts) {
      this.MyEcharts.hideLoading();
    }
  }
}
</script>
<style lang="scss" scoped>
.echarts-line {
  height: 100%;
}
</style>

　　@types目錄下：

　　component.d.ts程式碼：

import Vue from 'vue';

export class VanComponent {
  static name: string;
  static install(vue: typeof Vue): void;
}

　　說明：@types是npm的一個分支，當我們把npm包發上去，npm包就會託管到伺服器，供大家下載，但是ts為了程式碼的可複用性，要申明一些靜態型別檔案，那些檔案就是*.d.ts

　　shims-vue.d.ts程式碼：

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

　　App.vue程式碼：

<template>
  <div id="app">
    <jie-echarts :options="echartsOptions"></jie-echarts>
    <!-- <router-view /> -->
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import jieEcharts from "../src/index";
@Component({
  components: {
    jieEcharts
  }
})
export default class TestJieEchartsPreview extends Vue {
  protected echartsOptions = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line"
      }
    ]
  };
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

　　執行npm run serve，執行結果如下：

釋出到NPM

　　1.去https://www.npmjs.com/註冊一個賬號
　　2.登入郵箱，點選啟用連線

　　3.執行npm login，進行登入

PS E:\vue_codes\my-project-name> npm login
Username: zouyujie
Password:
Email: (this IS public) zouyujie@126.com

　　如果你是使用的淘寶映象，注意啊要先切換到npm官網映象，切換方式：npm config set registry https://registry.npmjs.org/

　　4.執行命令 npm publish，進行釋出，如果出現如下圖所示錯誤：

 　　說明郵箱沒有繫結成功，點選https://www.npmjs.com/email-edit，進行繫結，然後重新執行npm publish，執行結果如下：

PS E:\vue_codes\my-project-name> npm publish
npm notice 
npm notice package: jie-echarts@0.1.0
npm notice === Tarball Contents ===
npm notice 632B    dist/index.html
npm notice 4.3kB   dist/favicon.ico
npm notice 66B     babel.config.js
npm notice 965.0kB dist/js/chunk-vendors.80f39f1d.js
npm notice 6.3kB   dist/js/index.f9222971.js
npm notice 1.4kB   package.json
npm notice 327B    README.md
npm notice === Tarball Details ===
npm notice name:          jie-echarts
npm notice version:       0.1.0
npm notice package size:  341.3 kB
npm notice unpacked size: 978.0 kB
npm notice shasum:        2b65bfa887ba4677dc95a36a4b0403ebfecc9fde
npm notice integrity:     sha512-RwSE3lC8N3wZT[...]b1b9cvJ8UtL/w==
npm notice total files:   7
npm notice
+ jie-echarts@0.1.0

　　至此，npm釋出成功。

　　然後我們去npm上，檢視我們釋出的npm包，

　　 如果能看到如下圖所示介面：

 　　說明已釋出成功。

　　注意：每次重新發布都要記得修改一下版本號，否則會發布失敗。

　　npm上地址：https://www.npmjs.com/package/jie-echarts

安裝jie-echarts

     npm i jie-echarts

相關文章