写一个axios-ts吧!Rollup搭建typescript库(二)

时间:2020-7-1 作者:admin

导航

目标

构建一个由typescript编写的库,并打包出es模块、CommonJSAMD三种模块。

安装

npm i rollup -D

新建文件

src/index.js

import {a, b} from './test'

export default b

src/test

export const a = () => {
  console.log('a')
}

export const b = () => {
  console.log('b')
}

export const c = () => {
  console.log('c')
}

新建配置文件

rollup.config.js

export default {
  input: 'src/index.js',
  output: { 
    file: 'dist/bundle.js',
    format: 'cjs'
  }
};

package.json

{
  // ...
  "scripts": {
    "build": "rollup -c"
  },
  // ...
}

运行命令

npm run build

dist/bundle.js

'use strict';

const b = () => {
  console.log('b');
};

module.exports = b;

可以看到:

  • 引用了a但是未使用a,未打包a
  • 未引用b,未打包

打包多种规范

rollup.config.js

export default {
  input: 'src/index.js',
  output: [{
    file: 'dist/bundle.umd.js',
    format: 'umd',
    name: 'axiosTs'
  },{
    file: 'dist/bundle.esm.js',
    format: 'esm',
    name: 'axiosTs'
  }]
};

代码还是比较多的,本着重复代码写一遍的原则,做一些改造

const formats = ['umd', 'esm']
const output = formats.map((format) => ({
  file: `dist/bundle.${format}.js`,
  format,
  name: 'axiosTs',
}))
export default {
  input: 'src/index.js',
  output
};

支持ts

src中的文件改成xxx.ts,安装ts插件和typescript

npm i rollup-plugin-typescript2 typescript -D

rollup.config.js

import ts from 'rollup-plugin-typescript2'

const formats = ['umd', 'esm']
const output = formats.map((format) => ({
  file: `dist/bundle.${format}.js`,
  format,
  name: 'axiosTs',
}))

export default {
  input: 'src/index.ts', // 注意此处的后缀,src中的文件已改成xxx.ts
  output,
  plugins: [
    ts()
  ],
}

解决一些问题

引用外部模块

安装插件

npm i rollup-plugin-node-resolve -D

rollup.config.js

import ts from 'rollup-plugin-typescript2'
import resolve from 'rollup-plugin-node-resolve';

const formats = ['umd', 'esm']
const output = formats.map((format) => ({
  file: `dist/bundle.${format}.js`,
  format,
  name: 'axiosTs',
}))

export default {
  input: 'src/index.ts',
  output,
  plugins: [
    resolve(), // 注意顺序
    ts()
  ],
}

引用并导出CommonJS的包

安装插件

npm i rollup-plugin-commonjs -D

rollup.config.js

import ts from 'rollup-plugin-typescript2'
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

const formats = ['umd', 'esm']
const output = formats.map((format) => ({
  file: `dist/bundle.${format}.js`,
  format,
  name: 'axiosTs',
}))

export default {
  input: 'src/index.ts',
  output,
  plugins: [
    resolve(),
    commonjs(),
    ts(),
    serve('dist')
  ],
}

压缩代码

npm i rollup-plugin-terser -S

rollup.config.js

import ts from 'rollup-plugin-typescript2'
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from "rollup-plugin-terser";

const formats = ['umd', 'esm']
const output = formats.map((format) => ({
  file: `dist/axios-ts.${format}.min.js`,
  format,
  name: 'axiosTs',
}))

export default {
  input: 'src/index.ts',
  output,
  plugins: [
    resolve(),
    commonjs(),
    ts(),
    terser()
  ],
}

package.json

{
  "main": "dist/axios-ts.umd.min.js",
  "module": "dist/axios-ts.esm.min.js",
}

结束

搭建环境的过程还是比较简单的,可以看一些别人的实现。代码分支a-2,说一下有关文章的代码分支是以a开头,a-2就是文章的第二篇,也就是标题后面的序号,分支的序号是不连续的。我的理解可能是错的,希望大家能够指出,我会及时修改文章避免把其他同学带跑偏。如果有什么问题,欢迎评论区讨论,共同学习,共同进步。奥利给!

参考资料

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:87074139@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。