创建一个项目目录

mkdir project

创建package.json

npm init

配置tsconfig.json

  1. npm -i typescript -g //全局安装typescript,可以使用tsc命令
  2. tsc --init //创建默认的tsconfig.json文件
{    "compilerOptions": {      "target": "es5",    // 指定ECMAScript目标版本      "module": "es2015", // 指定模块代码类型      "lib": ["es2015", "es2017", "dom"], // 指定要包含在编译中的库文件      "outDir": "./dist",  // 编译后生成的文件目录      "strict": true,    // 启用所有严格的类型检查选项      "esModuleInterop": true    }}

开始编码

  1. 在项目的根目录创建你的源代码目录，比如创建一个src目录，之后你的代码就在该目录下编写
  2. 在src下指定你的入口文件,比如index.ts,之后打包的时候根根据你的入口index.ts输出编译为index.js
  3. 在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 /的符号链接。

发包

  • 创建.npmingnore文件,在发包之前排除一些没有必要发的文件

    touch .npmingnore

  • 注册npm，就按照提示依次填写信息就好了

    npm adduser

  • 发布

    npm publish