webpack构建一个lib项目

初始化一个项目

npm init

webpack安装

npm install webpack webpack-cli -S

使用typescript

npm install typescript ts-lint ts-loader

选择性使用webpack的plugin

npm install -D clean-webpack-plugin

编写webpack.config.js文件

const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
  // 扩展名
  resolve: {
    extensions: ['.js', '.ts', '.json'],
  },
  // 添加source-map
  devtool: 'source-map',
  // 入口文件
  entry: {
    index: './src/index.ts',
  },
  // 打包出来的文件
  output: {
    filename: '[name].js',// 生成的fiename需要与package.json中的main一致
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs',
  },
  // loader
  module: {
    rules: [
      // 对ts/tsx文件使用tsconfig.json
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              // 指定特定的ts编译配置，为了区分脚本的ts配置
              configFile: path.resolve(__dirname, './tsconfig.json'),
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  // plugins
  plugins: [new CleanWebpackPlugin()],
}

编写tsconfig.json文件

{
    "include": [ //放入打包的文件
        "src/**/*.ts"
    ], // 忽略的文件
    "exclude": [
        "node_modules",
    ]
}

导入eslint

npm install eslint -D

添加esliint支持ts的插件

eslint-plugin-typescript
@typescript-eslint/parser

eslint的配置文件

module.exports =
{
  // env 设置启用的环境
  'env': {
    'browser': true,
    'commonjs': true,
    'es6': true,
    'node': true,
  },
  'parser': '@typescript-eslint/parser',//TypeScript 转换为 ESTree 兼容格式的解析器
  'rules': {
    'no-alert': 2,//不允许alert
    'no-unused-vars': 2,//定义了变量就必须使用, 0 = off, 1 = warn, 2 = error
    'no-console': 2,//不允许出席那console
    'quotes': [2, 'single'],//使用单引号，1为单引号，2为双引号
    'semi': [2, 'never'],//禁止分号结尾
    'no-func-assign': 2,//禁止重复的函数声明
    'indent': [//空格缩进
      1, 2, {
        SwitchCase: 1
      }
    ]
  },
  //使用模块导入导出
  'parserOptions': {
    'sourceType': 'module',
  },
}

设置gitignore

node_modules
dist

设置.npmignore

## npm的忽略文件
## 忽略src下文件
src
.eslintrc.js
index.js
node_modules

发布包

npm publish

更新版本并发布包

npm version patch      1.2.3==>1.2.4
npm version minor      1.2.3===>1.3.0
npm version major      1.2.3===>2.0.0

npm publish