建立一个项目目次

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

因为本人学问有限，有许多须要提拔的处所，望人人多多指教。