通过`webpack`打包为esm包,`npm link`后包空对象,请问是怎么回事?
请问通过webpack
打包为esm包,npm link
后包空对象,请问是怎么回事?导出的包有编译,npm link
后得到的是{}
对象
两个文件metab.ts
:
const metab = {aa: 1};
export default metab;
入口文件metas.ts
引入metab.ts
:
import metab from "./metab";
const metas = metab;
export default metas;
这样打包后npm link
,在其他项目里导入metas.ts
,得到是一个空对象{}
,如果我把metas.ts
去掉import
,直接写上值可以得到结果
const metas = {aa: 1};
export default metas;
请问不能import
是怎么回事呢?我的webpack
配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
// 根据环境变量,判断当前是否为生产模式。
const isProduction = process.env.NODE_ENV === 'production';
// 读取当前的输出格式(UMD/ESM)
const outputType = process.env.OUTPUT_TYPE;
/** @type {import('webpack').Configuration} */
const config = {
// 打包输出 ESM 格式文件,最终要输出多个文件,便于实现按需加载,因此设置为多入口
entry: outputType === 'esm' ? {
metas: './src/calc/metas.ts'
} : (
isProduction ? './src/calc/index.ts' : './src/index.ts'
),
// 由于输出 ESM 格式文件为 Webpack 实验特性,因此需要加上此配置。
experiments: {
outputModule: outputType === 'esm'
},
// 根据环境变量决定
mode: isProduction ? 'production' : 'development',
// Babel与TS配置
module: {
rules: [
{
exclude: /node_modules/,
test: /\.ts(x?)$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env']]
}
},
{ loader: 'ts-loader' }
]
}
]
},
// 针对不同的环境变量,执行不同的打包动作。
output: outputType === 'esm' ? {
chunkFormat: 'module',
clean: true,
filename: '[name].esm.js',
library: {
type: 'module'
},
path: path.resolve(__dirname, 'es')
} : {
clean: true,
filename: 'index.js',
globalObject: 'globalThis', // 设置全局对象为 globalThis,使库同时兼容 Node.js 与浏览器环境。
library: {
export: 'default', // 指定将入口文件的默认导出作为库暴露。
name: 'calc', // 指定库名称
type: 'umd' // 输出的模块化格式, umd 表示允许模块通过 CommonJS、AMD 或作为全局变量使用。
},
path: path.resolve(__dirname, 'lib')
},
plugins: [
// 引入 html-webpack-plugin,只需在开发环境时使用。
...(!isProduction ? [new HtmlWebpackPlugin()] : [])
],
// 使路径查找时,支持省略文件名的ts后缀
resolve: {
extensions: ['.js', '.json', '.jsx', '.ts', '.tsx']
}
};
module.exports = config;
回复
1个回答
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容