问题描述
我正在尝试使用 webpack 创建一个可摇动树的库,但它不起作用。无论我做什么,当我在单独的项目中使用该库时,整个库都包含在输出中。
图书馆
这里是图书馆的相关文件。
src/sdk/index.ts
export const addOne = function(x: number): number {
return x + 1;
}
export const addTwo = function(x: number): number {
return x + 2;
}
export const addThree = function(x: number): number {
return x + 3;
}
tsconfig.json
{
"compilerOptions": {
"target": "es6","module": "es6","declaration": false,"sourceMap": false,"outDir": "./dist/","strict": true,"moduleResolution": "node","allowJs": true,"strictPropertyInitialization": false,"lib": [
"es2015","dom"
],"typeRoots": [
"src/customTypes","node_modules/@types"
]
}
}
package.json
{
"name": "test","version": "0.3.0","description": "","scripts": {
"build": "webpack --config webpack.prod.js","test": "echo \"Error: no test specified\" && exit 1"
},"keywords": [],"author": "","license": "ISC","devDependencies": {
"clean-webpack-plugin": "^3.0.0","ts-loader": "^8.0.14","typescript": "^4.1.3","webpack": "^5.14.0","webpack-cli": "^4.3.1"
},"sideEffects": false
}
webpack.prod.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports ={
mode: 'production',entry: {
'test': './src/sdk/index.ts',},output: {
filename: '[name].js',path: path.resolve(__dirname,'dist'),libraryTarget: 'umd',library: 'test',umdNamedDefine: true,resolve: {
extensions: ['.tsx','.ts','.js'],module: {
rules: [
{
test: /\.tsx?$/,loader: 'ts-loader',exclude: /node_modules/,],plugins: [
new CleanWebpackPlugin(),};
示例
这里是使用库的示例文件。上面库的输出放在src文件夹下,在sample.js旁边
sample.js
import { addOne } from './test';
console.log('HELLO')
console.log(addOne(1));
webpack.prod.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const copyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'production',entry: {
'sample': './src/sample.js',library: 'sample',new copyPlugin({
patterns: [
{ from: 'src/index.html',to: path.resolve(__dirname,'dist') },]
})
],};
当我打开示例的输出时,可以看到库中的所有函数都在那里。它应该只有 addOne,因为这是我唯一导入的。
export const addOne = function(x){
return x + 1;
}
export const addTwo = function(x){
return x + 2;
}
export const addThree = function(x){
return x + 3;
}
然后摇树正常工作。 addTwo 和 AddThree 不存在。
所以我认为问题在于我如何生成库以及我将 libraryTarget 设置为 umd,但我没有看到任何指定 esm 的选项。或者可能是其他原因。
解决方法
事实证明 Webpack 还不能这样做:https://github.com/webpack/webpack/issues/2933。 希望这将在下一个主要版本中可用。我现在将使用 Rollup。