nodejs“要求未定义”答案

【问题标题】：nodejs "require not defined"nodejs“要求未定义”
【发布时间】：2019-08-20 22:31:58
【问题描述】：

我有一个 PDF.js 项目正在尝试开始工作。不幸的是，该库使用了 node.js（正如我最终从所有 require 语句中发现的那样）。直到今天我才使用 node.js。

我安装了 node.js 并通过 w3schools 教程让它运行。现在我正在尝试将其扩展到我的项目，但再次获得“要求未定义”！

我在 Windows cmd shell 中启动 node.js 服务器，如下所示：

C:\Users\Greg\NodeJS_Hello_World\WebApplication1\web>node pdfjs-start.js

这里是 pdfjs-start.js:

const http = require('http');
var url = require('url');
var fs = require('fs');
http.createServer(function(req, res) {
    var q = url.parse(req.url, true);
    var filename = "." + q.pathname;
    console.log(filename);
    fs.readFile(filename, function(err, data) {
        if (err) {
            res.writeHead(404, {'Content-Type': 'text/html'});
            return res.end("404 Not Found");
        }  
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(data);
        return res.end();
    });

}).listen(9080, "");

我尝试像这样从 Chrome 浏览器运行项目：

http://localhost:9080/index.html

失败了

getDocument 未定义

这里是 index.html：

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #canvas_container {
                    width: 800px;
                    height: 450px;
                    overflow: auto;
                }
            </style>            
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
            <script type="module" src="pdf.js/src/pdf.js"></script>
            <script type="module" src="pdf.js/src/pdf.worker.js"></script>
            <script type="module" src="pdf.js/web/pdf_viewer.js"></script>
            <script type="module" src="pdf.js/web/viewer.js"></script>          
        </head>
        <body>
            <div>TODO write content</div>
            <div id="my_pdf_viewer">
                <div id="canvas_container">
                    <canvas id="pdf_renderer"></canvas>
                </div>                      
            </div>

        <script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        };

        this.loadPdfDrawing = function(drawingName) {
            getDocument(drawingName).then((pdf) => {
                myState.pdf = pdf;
                render();
            });     
            var container = document.getElementById('my_pdf_viewer');
            var viewer = document.getElementById('canvas_container');

            var pdfViewer = new PDFViewer({ 
                container: container,
                viewer: viewer
            });

            var pdfFindController = new PDFFindController({
                pdfViewer: pdfViewer
            });

            pdfViewer.setFindController(pdfFindController);
        };

        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {
                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');

                var viewport = page.getViewport(myState.zoom);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }

        function findText(text) {
            pdfFindController.executeCommand('find', {
                caseSensitive: false, 
                findPrevious: undefined,
                highlightAll: true, 
                phraseSearch: true, 
                query: text
            });
        }

        document.addEventListener("DOMContentLoaded", function(event) { 
            loadPdfDrawing('386-5001.pdf');
            findText('12.000');
        });

        </script>
        </body>
    </html>

那么为什么没有定义 getDocument 呢？如果我查看包含的 pdf.js，我发现它包含

exports.getDocument = pdfjsDisplayAPI.getDocument;

如果我在 index.html 中做这样的事情：

        var p = require('./pdf.js/src/pdf.js');
        p.getDocument(drawingName).then((pdf) => {
            myState.pdf = pdf;
            render();
        });

然后它失败了

require 未定义

Chrome 调试器控制台显示：

加载模块脚本失败：服务器响应 “text/html”的非 JavaScript MIME 类型。严格的 MIME 类型检查是根据 HTML 规范强制执行模块脚本。

有没有 nodejs 专家可以告诉我发生了什么？

【问题讨论】：

节点版本 8？
您是否关注过these instructions 将所有 src/ 文件捆绑到两个生产脚本中并构建通用查看器 - 如果您计划支持 Internet Explorer，这将特别有用- 或者从mozilla.github.io/pdf.js/getting_started/#download 下载预建库并按照说明进行操作 - 您只需要两个脚本，加载 4 的事实表明您做错了
@JaromandaX。感谢您的链接。看起来那里有一些好东西。需要一段时间才能消化，然后会回复。

标签： javascript node.js pdf.js

【解决方案1】：

如果您在浏览器中使用<script type=module>，则需要使用import，而不是require：

import {getDocument} form './pdf.js/src/pdf.js'

浏览器不支持require，你只能在前端代码中使用require，如果你用Webpack或Babel这样的工具转译的话。新浏览器支持模块和import，无需转译。

【讨论】：

如果我添加 import {getDocument} from './pdf.js/src/pdf.js';它产生错误“Uncaught SyntaxError: Unexpected token {”