手把手教你用typescript创建一个npm包

9次阅读

共计 2661 个字符，预计需要花费 7 分钟才能阅读完成。

mkdir project

npm init

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/<package> 中创建一个符号链接，该文件 link 到执行 npm link 命令的包
npm link package-name // 进入你要测试的项目，npm link 你项目的名字（package.json 中的 name），你就会发现你可以 import 你刚刚编写的 npm 包了

npm link package-name 将创建从全局安装的 package-name 到当前文件夹的 node_modules / 的符号链接。