组件库打包配置参考-umd打包

组件库打包配置参考-umd打包

今天讲讲关于组件库打包的umd打包，这里拿arco-design的打包工具arco-cli的1.0版本来讲解。

开始前

下面展示的代码可能是笔者更改过的，请勿过分较真(`へ´*)ノ。

开始

代码

相对于其他几个模块的打包来说，umd只是单纯使用webpack来输出一个单文件，所以就直接贴代码了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
const webpack = require('webpack')
const babelConfig = require('../utils/config/babelConfig')
const packageName = require('../../package.json').name

webpack({
  // 生产模式，会压缩代码
  mode: 'production',
  // 打包入口文件
  entry: `${process.cwd()}/components/index.tsx`,
  output: {
    // 输出的文件路径
    path: `${process.cwd()}/dist`,
    // cdn路径
    publicPath: `https://unpkg.com/${packageName}@latest/dist/`,
    // 文件名称
    filename: '[name].min.js',
    // 外部使用的名称
    library: '[name]',
    libraryTarget: 'umd',
  },
  resolve: {
    // 需要处理的文件
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  // 模块不会被打包
  externals: [
    {
      react: {
        root: 'React',
        commonjs2: 'react',
        commonjs: 'react',
        amd: 'react',
      },
      'react-dom': {
        root: 'ReactDOM',
        commonjs2: 'react-dom',
        commonjs: 'react-dom',
        amd: 'react-dom',
      },
    },
  ],
  module: {
    rules: [
      {
        // 解析ts模块
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            // 还是之前esm和cjs用的babel配置
            options: babelConfig,
          },
          {
            loader: 'ts-loader',
            options: {}
          },
        ],
      },
      {
        // 处理less
        test: /\.less$/,
        // 不处理.module.less文件，即不处理模块化样式文件
        exclude: /\.module\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true,
            },
          },
        ]
      },
      {
        // 普通css文件处理
        test: /\.css$/,
        sideEffects: true,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
        ],
      },
      {
        // 静态资源处理
        test: /\.(png|jpg|gif|ttf|eot|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          esModule: false,
        },
      },
      {
        // svg 处理
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
      {
        // 模块样式文件处理
        test: /\.module\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[local]-[hash:10]',
              },
            }
          },
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true,
            },
          },
        ]
      },
    ]
  }
}, (err, stats) => {

  if (err) {
    console.error(err.stack || err);
    return;
  }

  console.log(stats.toString({
    assets: true,
    colors: true,
    warnings: true,
    errors: true,
    errorDetails: true,
    entrypoints: true,
    version: true,
    hash: false,
    timings: true,
    chunks: false,
    chunkModules: false,
    children: false,
  }))

  // if (stats.hasErrors()) {
  //   // reject();
  // } else {
  //   // resolve(null);
  // }
})

其他

sideEffects

tree-shaking 去除无用代码

1
2
3
4
5
6
7
8
9
10
11
// 所有文件都没有副作用，全都可以删除
var sideEffects = false 

// 指定目录或文件没有副作用
var sideEffects = [
  "dist/*",
  "esm/**/style/*",
  "lib/**/style/*",
  "*.less"
]

结束

结束🔚。

参考链接

Babel7 中 @babel/preset-env 的使用
【目录】组件库打包cli教程
react 组件库打包指南
css-loader中importLoaders的理解

前端 配置
frontend

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！