【问题标题】：Adding a script as "module" in wordpress admin area在 wordpress 管理区域中添加脚本作为“模块”
【发布时间】：2020-04-09 07:06:18
【问题描述】：

我正在尝试将我兄弟的 QL-800 标签打印机连接到 woocommerce 网上商店管理页面

打开订单，点击地址，打印。

brother 为此提供了一个 javascript 库 (b-pac: https://www.brother.co.jp/eng/dev/bpac/sample/index.aspx)，它可以在示例页面中使用，但现在我想将它添加到 woocommerce 页面中。

它是一个带有export 的缩小的.js 和一个带有<script type="module"> import * as bpac from './bpac.js'; //... 的html。

我认为为 wordpress 获取“添加 js 插件”并将脚本（从 html）复制到页脚 js 中并“添加为外部 javascript”缩小 bpac.js 是最简单的方法

但我收到了 Uncaught SyntaxError: Cannot use import statement outside a module 和 Uncaught SyntaxError: Unexpected token 'export'

然后我想好吧，也许它有助于转换它，所以我得到了一个 commonjs 在线转换器并将结果作为“外部 javascript”而不是原来的 bpac.js。这产生bpac-cjs.js?ver=1.8.1:3 Uncaught ReferenceError: exports is not defined

我不是很了解整个事情，而且我不太习惯 wordpress，所以如果有人能快速帮助我，那就太好了！

如果您需要任何其他信息，请随时询问！谢谢

这是原始 sample.html 的`<head>`

（获取表单输入并将其发送到打印 api，简单的东西）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>b-PAC 3.2 Javascript Sample for Extensions</title>

    <script type="module">
    import * as bpac from './bpac.js';
    const DATA_FOLDER = "C:\\Program Files\\Brother bPAC3 SDK\\Templates\\";
    //const DATA_FOLDER = "http://localhost/";
    //------------------------------------------------------------------------------
    //   Function name   :   DoPrint
    //   Description     :   Print, Preview Module
    //------------------------------------------------------------------------------
    window.DoPrint = async function DoPrint(strExport)
    {
        if(bpac.IsExtensionInstalled() == false)
        {
            const agent = window.navigator.userAgent.toLowerCase();
            const ischrome = (agent.indexOf('chrome') !== -1) && (agent.indexOf('edge') === -1)  && (agent.indexOf('opr') === -1)
            if(ischrome)
                window.open('https://chrome.google.com/webstore/detail/ilpghlfadkjifilabejhhijpfphfcfhb', '_blank');
            return;
        }

        try{
            const theForm = document.getElementById("myForm");
            const nItem = theForm.cmbTemplate.selectedIndex;
            const strPath = DATA_FOLDER + theForm.cmbTemplate.options[nItem].value;

            const objDoc = bpac.IDocument;
            const ret = await objDoc.Open(strPath);
            if(ret == true)
            {
                const objName = await objDoc.GetObject("objName");
                objName.Text = name;
                objName.Text = street;
                objName.Text = city;


                theForm.txtWidth.value = await objDoc.Width;

                if(strExport == "")
                {
                    objDoc.StartPrint("", 0);
                    objDoc.PrintOut(1, 0);
                    objDoc.EndPrint();
                }
                else
                {
                    const image = await objDoc.GetImageData(4, 0, 100);
                    const img = document.getElementById("previewArea");
                    img.src = image;
                }

                objDoc.Close();
            }
        }
        catch(e)
        {
            console.log(e);
        }
    }   
    </script>  
</head>

这是 bpac.js 库

不知道这个对 oyu 家伙有多大用处，或者解决问题是否重要..？

// .... abbreviated because of char limit in posts.. probably nothing very important here anyway. if you want me to post the whole thing, please let me know. this right here is the END of the file

i(t):n(f.detail.ret)};document.addEventListener(u,r)});return n.appendMessage(f),e}static Export(i,r,u){const f="IDocument::Export",e={method:f,type:i,filePath:r,dpi:u},o=new Promise((n,i)=>{const r=u=>{document.removeEventListener(f,r),u.detail.connect==!1?i(t):n(u.detail.ret)};document.addEventListener(f,r)});return n.appendMessage(e),o}static Close(){const i="IDocument::Close",r={method:i},u=new Promise((n,r)=>{const u=f=>{document.removeEventListener(i,u),f.detail.connect==!1?r(t):n(f.detail.ret)};document.addEventListener(i,u)});return n.appendMessage(r),u}}export const IsExtensionInstalled=()=>document.body.classList.contains("bpac-extension-installed")?!0:!1

如何将这个简单的东西添加到我的 woocommerce 管理页面？我如何写信给<head> 或将<script>s 包含为“模块”或让es6 导入/导出语法与我的页面一起使用？我只是不能完全掌握它。

【问题讨论】：

你可以使用 add_action('admin_enqueue_scripts', 'my_enqueue_function');将 JS 文件添加到您的管理区域请参阅：stackoverflow.com/questions/3326967/… 或 developer.wordpress.org/reference/hooks/admin_enqueue_scripts
这会将其添加为模块吗？这似乎是个问题。（导入/导出不起作用）
你能把你的JS库的下载链接发给我吗？或者一些用于嵌入的文档？您使用的是哪个浏览器和浏览器版本？也许你的浏览器不支持这个：caniuse.com/#feat=es6-module
我正在使用带有“brother b-pac extension”的当前 chrome。你可以在这里下载 JS 库：brother.co.jp/eng/dev/bpac/download/index.aspx（我有 3.2.031（64 位版本））。提取后它将位于 Samples/JavaScript 下。包中还有一个（相当糟糕的）文档。如果您能帮我解决这个问题，我将非常感激
嗯，好吧，我使用的是 OSX，所以我无法打开任何文件，因为它们都是 .exe 或 .msi...所以我想你为你的脚本模块尝试了这个插件：@ 987654326@ 也许您可以使用此插件添加脚本，并使用“add_action('admin_enqueue_scripts', 'my_enqueue_function');”添加 bpac.js。我想我不能为你做更多的事了，对不起。 :(

标签： javascript php wordpress

【解决方案1】：

您可以通过执行以下操作在管理员中导入您的模块：

add_action( 'admin_enqueue_scripts', function() {
    $handle  = 'ps-import-module-one-handle';
    $src     = get_stylesheet_directory_uri() . '/doPrint.js';
    $deps    = [];
    $version = '1.0.0';
    wp_enqueue_script( $handle, $src, $deps, $version, true );

} );

/**
 *Script that import modules must use a script tag with type="module", 
 * so let's set it for the script.
 */
add_filter( 'script_loader_tag', function ( $tag, $handle, $src ) {

    switch ( $handle ) {
        case 'ps-import-module-one-handle':
            return '<script type="module" src="' . esc_url( $src ) . '"></script>';
            break;

        default:
            return $tag;
            break;
    }

}, 10, 3 );

我使用switch case 的原因是它允许我为不同的模块很好地添加多个句柄，如下所示：

switch ( $handle ) {
    case 'ps-import-module-one-handle':
    case 'ps-import-module-two-handle':
    case 'ps-import-module-three-handle':

        return '<script type="module" src="' . esc_url( $src ) . '"></script>';
        break;

    default:
        return $tag;
        break;
}

但您可以用简单的if () 替换 switch 语句：

if ( 'ps-import-module-one-handle' === $handle ) {
    return '<script type="module" src="' . esc_url( $src ) . '"></script>';
} else {
    return $tag;
}

doPrint.js：

import * as bpac from './bpac.js';
const DATA_FOLDER = "C:\\Program Files\\Brother bPAC3 SDK\\Templates\\";
//const DATA_FOLDER = "http://localhost/";
//------------------------------------------------------------------------------
//   Function name   :   DoPrint
//   Description     :   Print, Preview Module
//------------------------------------------------------------------------------
window.DoPrint = async function DoPrint(strExport)
{
    if(bpac.IsExtensionInstalled() == false)
    {
        const agent = window.navigator.userAgent.toLowerCase();
        const ischrome = (agent.indexOf('chrome') !== -1) && (agent.indexOf('edge') === -1)  && (agent.indexOf('opr') === -1)
        if(ischrome)
            window.open('https://chrome.google.com/webstore/detail/ilpghlfadkjifilabejhhijpfphfcfhb', '_blank');
        return;
    }

    try{
        const theForm = document.getElementById("myForm");
        const nItem = theForm.cmbTemplate.selectedIndex;
        const strPath = DATA_FOLDER + theForm.cmbTemplate.options[nItem].value;

        const objDoc = bpac.IDocument;
        const ret = await objDoc.Open(strPath);
        if(ret == true)
        {
            const objName = await objDoc.GetObject("objName");
            objName.Text = name;
            objName.Text = street;
            objName.Text = city;


            theForm.txtWidth.value = await objDoc.Width;

            if(strExport == "")
            {
                objDoc.StartPrint("", 0);
                objDoc.PrintOut(1, 0);
                objDoc.EndPrint();
            }
            else
            {
                const image = await objDoc.GetImageData(4, 0, 100);
                const img = document.getElementById("previewArea");
                img.src = image;
            }

            objDoc.Close();
        }
    }
    catch(e)
    {
        console.log(e);
    }
}

【讨论】：

这是原始 sample.html 的&lt;head&gt;

这是 bpac.js 库

这是原始 sample.html 的`<head>`