Question

我想以编程方式打印一些pdf文档。我现在正试着让this PDFkit library与webpack合作。

我已经离开了表格：

Can't resolve 'fs' in ..

到

fs.readFileSync is not a function

然后是警告

[BABEL] Note: The code generator has deoptimised the styling of "E:/MyProjects/accountingsystem/node_modules/brotli/dec/dictionary-da
ta.js" as it exceeds the max of "500KB".

然后到

require is not defined - 我被困在这里。所有这些错误都来自图书馆本身。

我只有一个文件 - app.js ，只有一行代码，即：

const PDFDocument = require('pdfkit');

我的最终webpack.config.js看起来像这样：

module.exports = {
// devtool: 'source-map',

entry: './src/app.js',
output: {
    path: path.resolve (__dirname, "dist"),
    filename: "bundle.js"
},

// node: {
//     console: true,
//     fs: 'empty',
//     net: 'empty',
//     tls: 'empty'
// },

// i've added 'target' - following the advice form some github comments.
target: 'node',
module : {
    rules : [
        { test: /\.js$/, loader: 'babel-loader' },
        {
            test : /\.html$/,
            use : [ 'html-loader' ]
        },

        // then i've added this 2 loaders also:
        { test: /\.json$/, loader: 'json-loader' },
        { test: /pdfkit|png-js/, loader: "transform-loader?brfs" }
    ]
},
plugins:[
    new HtmlWebpackPlugin ({
          template : `src/app.html`
    })
],

};

这实际上是一个1行的应用程序，我现在已经打了好几个小时了。我已经看到许多用户遇到fs核心模块和webpack的问题 - 我尝试了所有可以找到的解决方案。它能有多难？这里到底发生了什么？感谢任何见解，谢谢。

Answer 1

可以使用webpack。

pdfmake是pdfkit的包装器，适用于webpack。正如您所看到的，webpack.config.js有点像hacky：

https://github.com/bpampuch/pdfmake/blob/master/webpack.config.js

就个人而言，我最终使用pdfmake，它提供了一个内置的js文件。我这样做，你必须调整你的webpack.config，使用resolve.alias字段指向pdfmake构建的js文件。

Answer 2

如果您想直接使用构建版本，只需使用：

window.pdfMake = require('pdfmake/build/pdfmake.js');
var vfs = require('pdfmake/build/vfs_fonts.js');
window.pdfMake.vfs = vfs.pdfMake.vfs;

Answer 3

对于遇到这个问题的下一个可怜的灵魂，几乎可以肯定地提到fs.readFileSync的第一个问题是PDFKit - Custom Fonts - fs.readFileSync is not a function

问题中的这一行是解决这一难题的关键：

{ test: /pdfkit|png-js/, loader: "transform-loader?brfs" }

我最终放弃了，只是将构建的发行文件（从https://github.com/foliojs/pdfkit/releases）导入了webpack之外（即，使用脚本src =“”引用了静态.js文件）

Answer 4

您也可以将其添加到外部：

  externals: [
    {
      pdfkit: "commonjs2 pdfkit",
    }
  ]

如何在webpack中使用PDFkit库？

4 个答案: