由于五一放假这两天在重构之前写的ts插件类库(附上地址), 遇到了一个需求——需要在浏览器端能用script引入, 正好用的是webpack, 所以花点时间来记录一下.

更新

[2019-5-2]

Added

  • Initial release

一、需求

  • 构建的纯原生类库
  • 需要能直接通过script导入

二、环境

三、构建

2.1 第一步: 查文档

webpack官方文档中对于library的描述已经很清晰了.

2.2 第二步: webpack配置

PS: 配置webpack.config.ts

1
2
3
4
5
6
7
8
9
10
...
export default {
  output: {
    filename: '[一般用插件名].js',
    path: path.resolve(__dirname, 'lib'),
    library: '[一般用插件名]',
    libraryTarget: 'var',   // 多个可选值, 具体参考[官方文档](https://webpack.docschina.org/guides/author-libraries/)
  },
};
...

2.3 第三步: index导出

PS: 于入口文件中导入&导出所需的插件

1
2
3
4
5
6
// src/index.ts
import {
  ColorfulBubble,
} from './ddzy/canvas/colorful-bubble/index';

export default ColorfulBubble;

2.4 第四步: build

PS: 执行npm run build打包

1
npm run build

2.5 第五步: 引入测试

  • 通过script引入插件.js
  • console.log调试

可以看到, 打印出了结果:

引入插件

但是, 请注意, 这里并不是我们预期的结果, 我想的是直接通过new 插件名来实例化插件, 但是这里好像多了一层default对象嵌套, 找了一下文档, 浏览器并不识别通过export default, 所以增加libraryExport字段即可:

1
2
3
4
5
6
7
8
9
10
// webpack.config.ts
export default {
  output: {
    filename: '[一般用插件名].js',
    path: path.resolve(__dirname, 'lib'),
    library: '[一般用插件名]',
    libraryTarget: 'var',   // 多个可选值, 具体参考[官方文档](https://webpack.docschina.org/guides/author-libraries/)
    libraryExport: 'default',
  },
};