資訊專欄INFORMATION COLUMN
摘要：但是如果將我們的包還沒有測(cè)試好，直接發(fā)到遠(yuǎn)程未免顯得有點(diǎn)笨拙。發(fā)包創(chuàng)建文件在發(fā)包之前排除一些沒有必要發(fā)的文件注冊(cè)，就按照提示依次填寫信息就好了發(fā)布由于本人學(xué)識(shí)有限，有很多需要提升的地方，望大家多多指教。
創(chuàng)建一個(gè)項(xià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)格的類型檢查選項(xiàng)
"esModuleInterop": true
}
}
開始編碼
在項(xiàng)目的根目錄創(chuàng)建你的源代碼目錄，比如創(chuàng)建一個(gè)src目錄，之后你的代碼就在該目錄下編寫
在src下指定你的入口文件,比如index.ts,之后打包的時(shí)候根根據(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"
}
編譯
因?yàn)槟愕捻?xiàng)目中可能會(huì)有css文件之類的非js文件，所以采用webpack的編譯方式更加靈活
在項(xiàng)目的根目錄下創(chuàng)建一個(gè)webpack.config.js
目標(biāo)生成兩個(gè)版本的包文件：
（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)出入口文件時(shí)，輸出的類型,這里是通過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)出入口文件時(shí)，輸出的類型。這里你導(dǎo)出的方法變量會(huì)掛載到window.demo上，適用于使用方通過window對(duì)象訪問
},
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"
}
接下來你就會(huì)在dist目錄下和browser目錄下看到你打包編譯輸出的兩個(gè)包
測(cè)試一般我們使用一個(gè)npm包的過程都是通過npm i package-name從遠(yuǎn)程下載好, 之后import xxx from package-name導(dǎo)入交給其他項(xiàng)目來使用。但是如果將我們的包還沒有測(cè)試好，直接發(fā)到遠(yuǎn)程未免顯得有點(diǎn)笨拙。我們可以在本地直接引入你剛剛編寫的npm包，無須發(fā)到遠(yuǎn)程
npm link // 在你的項(xiàng)目的根目錄npm link
npm link將在全局的node_modules/中創(chuàng)建一個(gè)符號(hào)鏈接，該文件link到執(zhí)行npm link命令的包
npm link package-name // 進(jìn)入你要測(cè)試的項(xiàng)目，npm link 你項(xiàng)目的名字（package.json中的name），你就會(huì)發(fā)現(xiàn)你可以import你剛剛編寫的npm包了
npm link package-name 將創(chuàng)建從全局安裝的package-name到當(dāng)前文件夾的node_modules /的符號(hào)鏈接。發(fā)包
創(chuàng)建.npmingnore文件,在發(fā)包之前排除一些沒有必要發(fā)的文件
touch .npmingnore
注冊(cè)npm，就按照提示依次填寫信息就好了
npm adduser
發(fā)布
npm publish
由于本人學(xué)識(shí)有限，有很多需要提升的地方，望大家多多指教。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/109719.html
摘要：前端的所使用的技術(shù)棧后端這個(gè)小項(xiàng)目才開始，使用已經(jīng)搭建好了前端開發(fā)環(huán)境及相應(yīng)的的配置。接下來我會(huì)帶著大家一起完成整個(gè)簡(jiǎn)書的開發(fā)工作。 這是一個(gè)開源的個(gè)人項(xiàng)目。 前端的所使用的技術(shù)棧: typescriptes6vue2vue-cliwebpack2axiosangular4angular-cli 后端: nodejsmongoDBejs 這個(gè)小項(xiàng)目才開始，使用vue-cli已經(jīng)搭建好了...
摘要：多端統(tǒng)一開發(fā)框架優(yōu)秀學(xué)習(xí)資源匯總官方資源項(xiàng)目倉庫官方文檔項(xiàng)目倉庫官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節(jié)跳動(dòng)小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學(xué)從到構(gòu)建適配不同端微信小程序等的應(yīng)用小程序最 Awesome Taro 多端統(tǒng)一開發(fā)框架 Taro 優(yōu)秀學(xué)習(xí)資源匯總 showImg(https://segmentfault.com/img/r...
摘要：在我轉(zhuǎn)前端以來，一直想要實(shí)現(xiàn)一個(gè)愿望自己搭建一個(gè)可以自動(dòng)解析文檔的個(gè)人站今天終于實(shí)現(xiàn)啦，先貼上我的地址確認(rèn)需求其實(shí)一個(gè)最簡(jiǎn)單的個(gè)人站，就是許多的頁面，你只要可以用寫出來就可以，然后掛到上。 在我轉(zhuǎn)前端以來，一直想要實(shí)現(xiàn)一個(gè)愿望： 自己搭建一個(gè)可以自動(dòng)解析Markdown文檔的個(gè)人站 今天終于實(shí)現(xiàn)啦，先貼上我的blog地址 確認(rèn)需求 其實(shí)一個(gè)最簡(jiǎn)單的個(gè)人站，就是許多的HTML頁面，你只要...
摘要：夾在中間的被鏈?zhǔn)秸{(diào)用，他們拿到上個(gè)的返回值，為下一個(gè)提供輸入。最終把返回值和傳給。前面我們說過，也是一個(gè)模塊，它導(dǎo)出一個(gè)函數(shù)，該函數(shù)的參數(shù)是的源模塊，處理后把返回值交給下一個(gè)。 文：小 boy（滬江網(wǎng)校Web前端工程師）本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者及出處 showImg(https://segmentfault.com/img/remote/1460000012990131?w=1083...
摘要：前言這個(gè)輪子已經(jīng)有很多人造過了，為了不重復(fù)造輪子，我將本項(xiàng)目以三階段實(shí)現(xiàn)大家可以在中的查看純前端后端前端后端前端希望能給大家一個(gè)漸進(jìn)學(xué)習(xí)的經(jīng)驗(yàn)。 前言 Vue+Socket.io這個(gè)輪子已經(jīng)有很多人造過了，為了不重復(fù)造輪子，我將本項(xiàng)目以三階段實(shí)現(xiàn)（大家可以在github中的Releases查看）： 純前端（Vuex） 后端+前端（JavaScript） 后端+前端（TypeScrip...
閱讀 1622·2021-09-03 10:29
閱讀 3605·2019-08-29 16:24
閱讀 2583·2019-08-29 11:03
閱讀 1652·2019-08-26 13:52
閱讀 3088·2019-08-26 11:36
閱讀 2947·2019-08-23 17:19
閱讀 704·2019-08-23 17:14
閱讀 951·2019-08-23 13:59
