手把手教你用typescript撸一个npm包

ZHAO_ 发布于2019-08-26 13:52 / 1682人阅读

摘要：但是如果将我们的包还没有测试好，直接发到远程未免显得有点笨拙。发包创建文件在发包之前排除一些没有必要发的文件注册，就按照提示依次填写信息就好了发布由于本人学识有限，有很多需要提升的地方，望大家多多指教。

创建一个项目目录

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"// 以库的形式导出入口文件时，输出的类型。这里你导出的方法变量会挂载到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云服务器教你用手把手教你做图像识别教你用阿里云开我的世界服务器手把手教你阿里云服务器搭建商城

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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