手把手教你用typescript擼一個npm包

ZHAO_ 發布于2019-08-26 13:52 / 1409人閱讀

摘要：但是如果將我們的包還沒有測試好，直接發到遠程未免顯得有點笨拙。發包創建文件在發包之前排除一些沒有必要發的文件注冊，就按照提示依次填寫信息就好了發布由于本人學識有限，有很多需要提升的地方，望大家多多指教。

創建一個項目目錄

mkdir project

創建package.json

npm init

配置tsconfig.json

npm -i typescript -g //全局安裝typescript,可以使用tsc命令

tsc --init //創建默認的tsconfig.json文件

{
    "compilerOptions": {
      "target": "es5",    // 指定ECMAScript目標版本
      "module": "es2015", // 指定模塊代碼類型
      "lib": ["es2015", "es2017", "dom"], // 指定要包含在編譯中的庫文件
      "outDir": "./dist",  // 編譯后生成的文件目錄
      "strict": true,    // 啟用所有嚴格的類型檢查選項
      "esModuleInterop": true
    }
}

開始編碼

在項目的根目錄創建你的源代碼目錄，比如創建一個src目錄，之后你的代碼就在該目錄下編寫

在src下指定你的入口文件,比如index.ts,之后打包的時候根根據你的入口index.ts輸出編譯為index.js

在package.json中指定程序的入口

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/index.js", // 這里指定程序的入口
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

編譯

因為你的項目中可能會有css文件之類的非js文件，所以采用webpack的編譯方式更加靈活

在項目的根目錄下創建一個webpack.config.js

目標生成兩個版本的包文件：

（1）供類似于使用方直接import這種方式導入的,即UMD

（2）類似于使用方在網頁中直接通過你的script標簽引入你的文件這種方式,即通過全局變量的方式引入

具體如下

const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const UMD = {
  entry: "./src/index.ts",
  mode: "production",
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }, {
        test: /.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      }
    ]
  },
  resolve: {
    extensions: [ ".tsx", ".ts", ".js" ]
  },
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
    library: "demo", // 以庫的形式導出入口文件
    libraryTarget: "umd" // 以庫的形式導出入口文件時，輸出的類型,這里是通過umd的方式來暴露library,適用于使用方import的方式導入npm包
  },
  optimization: {
    minimize: true
  },
  plugins: [new CleanWebpackPlugin()]
};

const CLIENT = {
    entry: "./src/index.ts",
    mode: "production",
    module: {
      rules: [
        {
          test: /.tsx?$/,
          use: "ts-loader",
          exclude: /node_modules/
        }, {
          test: /.css$/,
          use: [
            "style-loader",
            "css-loader"
          ]
        }
      ]
    },
    resolve: {
      extensions: [ ".tsx", ".ts", ".js" ]
    },
    output: {
      filename: "demo.js",
      path: path.resolve(__dirname, "browser"),
      library: "demo", // 以庫的形式導出入口文件
      libraryTarget: "window"http:// 以庫的形式導出入口文件時，輸出的類型。這里你導出的方法變量會掛載到window.demo上，適用于使用方通過window對象訪問
    },
    optimization: {
      minimize: true
    },
    plugins: [new CleanWebpackPlugin()]
};
module.exports = [UMD, CLIENT];

將編譯命令webpack --progress --display-chunks -p添加到package.json中的build上,這樣就能通過npm run build命令來快速編譯了

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.js", // 這里指定程序的入口
  "scripts": {
    "build": "webpack --progress --display-chunks -p",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

接下來你就會在dist目錄下和browser目錄下看到你打包編譯輸出的兩個包

測試

一般我們使用一個npm包的過程都是通過npm i package-name從遠程下載好, 之后import xxx from package-name導入交給其他項目來使用。但是如果將我們的包還沒有測試好，直接發到遠程未免顯得有點笨拙。我們可以在本地直接引入你剛剛編寫的npm包，無須發到遠程

npm link // 在你的項目的根目錄npm link

npm link將在全局的node_modules/中創建一個符號鏈接，該文件link到執行npm link命令的包

npm link package-name // 進入你要測試的項目，npm link 你項目的名字（package.json中的name），你就會發現你可以import你剛剛編寫的npm包了

npm link package-name 將創建從全局安裝的package-name到當前文件夾的node_modules /的符號鏈接。

發包

創建.npmingnore文件,在發包之前排除一些沒有必要發的文件

touch .npmingnore

注冊npm，就按照提示依次填寫信息就好了

npm adduser

發布

npm publish

由于本人學識有限，有很多需要提升的地方，望大家多多指教。

GPU云服務器云服務器教你用手把手教你做圖像識別教你用阿里云開我的世界服務器手把手教你阿里云服務器搭建商城

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109719.html

手把手教你用typescript+nodejs+mongoDB+vue2+angular4仿簡書

摘要：前端的所使用的技術棧后端這個小項目才開始，使用已經搭建好了前端開發環境及相應的的配置。接下來我會帶著大家一起完成整個簡書的開發工作。這是一個開源的個人項目。前端的所使用的技術棧: typescriptes6vue2vue-cliwebpack2axiosangular4angular-cli 后端: nodejsmongoDBejs 這個小項目才開始，使用vue-cli已經搭建好了...

liuchengxu 2019-08-19 18:22 評論0 收藏0
Taro 優秀學習資源匯總

摘要：多端統一開發框架優秀學習資源匯總官方資源項目倉庫官方文檔項目倉庫官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節跳動小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學從到構建適配不同端微信小程序等的應用小程序最 Awesome Taro 多端統一開發框架 Taro 優秀學習資源匯總 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 評論0 收藏0
手把手教你用vue搭建個人站

摘要：在我轉前端以來，一直想要實現一個愿望自己搭建一個可以自動解析文檔的個人站今天終于實現啦，先貼上我的地址確認需求其實一個最簡單的個人站，就是許多的頁面，你只要可以用寫出來就可以，然后掛到上。在我轉前端以來，一直想要實現一個愿望：自己搭建一個可以自動解析Markdown文檔的個人站今天終于實現啦，先貼上我的blog地址確認需求其實一個最簡單的個人站，就是許多的HTML頁面，你只要...

xietao3 2019-08-02 10:58 評論0 收藏0
手把手教你擼一個 Webpack Loader

摘要：夾在中間的被鏈式調用，他們拿到上個的返回值，為下一個提供輸入。最終把返回值和傳給。前面我們說過，也是一個模塊，它導出一個函數，該函數的參數是的源模塊，處理后把返回值交給下一個。文：小 boy（滬江網校Web前端工程師）本文原創，轉載請注明作者及出處 showImg(https://segmentfault.com/img/remote/1460000012990131?w=1083...

sugarmo 2019-08-22 14:01 評論0 收藏0
教你用Vue漸進式搭建聊天室，從JavaScript=>TypeScript

摘要：前言這個輪子已經有很多人造過了，為了不重復造輪子，我將本項目以三階段實現大家可以在中的查看純前端后端前端后端前端希望能給大家一個漸進學習的經驗。前言 Vue+Socket.io這個輪子已經有很多人造過了，為了不重復造輪子，我將本項目以三階段實現（大家可以在github中的Releases查看）：純前端（Vuex）后端+前端（JavaScript）后端+前端（TypeScrip...

skinner 2019-08-21 17:19 評論0 收藏0