成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

ZHAO_ / 1421人閱讀

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

創(chuàng)建一個項目目錄 
mkdir project
創(chuàng)建package.json 
npm init
配置tsconfig.json

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

tsc --init //創(chuàng)建默認(rèn)的tsconfig.json文件

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

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

在src下指定你的入口文件,比如index.ts,之后打包的時候根根據(jù)你的入口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的編譯方式更加靈活

在項目的根目錄下創(chuàng)建一個webpack.config.js

目標(biāo)生成兩個版本的包文件：

（1）供類似于使用方直接import這種方式導(dǎo)入的,即UMD
（2）類似于使用方在網(wǎng)頁中直接通過你的script標(biāo)簽引入你的文件這種方式,即通過全局變量的方式引入

具體如下

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", // 以庫的形式導(dǎo)出入口文件
    libraryTarget: "umd" // 以庫的形式導(dǎo)出入口文件時，輸出的類型,這里是通過umd的方式來暴露library,適用于使用方import的方式導(dǎo)入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", // 以庫的形式導(dǎo)出入口文件
      libraryTarget: "window"http:// 以庫的形式導(dǎo)出入口文件時，輸出的類型。這里你導(dǎo)出的方法變量會掛載到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從遠(yuǎn)程下載好, 之后import xxx from package-name導(dǎo)入交給其他項目來使用。但是如果將我們的包還沒有測試好，直接發(fā)到遠(yuǎn)程未免顯得有點笨拙。我們可以在本地直接引入你剛剛編寫的npm包，無須發(fā)到遠(yuǎn)程

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

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

npm link package-name // 進(jìn)入你要測試的項目，npm link 你項目的名字（package.json中的name），你就會發(fā)現(xiàn)你可以import你剛剛編寫的npm包了

npm link package-name 將創(chuàng)建從全局安裝的package-name到當(dāng)前文件夾的node_modules /的符號鏈接。

發(fā)包

創(chuàng)建.npmingnore文件,在發(fā)包之前排除一些沒有必要發(fā)的文件

touch .npmingnore

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

npm adduser

發(fā)布

npm publish

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109719.html

相關(guān)文章

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

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

    liuchengxu 評論0 收藏0

  • Taro 優(yōu)秀學(xué)習(xí)資源匯總

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

    toddmark 評論0 收藏0

  • 手把手教你用vue搭建個人站

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

    xietao3 評論0 收藏0

  • 手把手教你擼一個 Webpack Loader

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

    sugarmo 評論0 收藏0

  • 教你用Vue漸進(jìn)式搭建聊天室，從JavaScript=>TypeScript

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

    skinner 評論0 收藏0

發(fā)表評論

0條評論

ZHAO_

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<