web-dev-qa-db-ja.com

"Object.defineProperty（exports、" __esModule "、{value：true}）;" FunctionFileで関数の実行をブロックします

このチュートリアルに従って、TypeScript＆ReactプロジェクトでOffice Webアドインを開始しました： https://github.com/OfficeDev/office-js-docs-pr/blob/master/docs/includes/file-get-開始-Excel-react.md 。タスクペインの関数とページは正しく機能しますが、関数ファイルページの関数は正しく実行できません。

コードを削除したところ、Object.defineProperty(exports, "__esModule", { value: true });がコンパイルされたfunction-file.jsの問題の1行であることがわかりました。存在する場合は常に、ファイル内の関数は実行されません。 Fiddlerは、スクリプトが警告なしにExcelに正しくロードされていることを示しています。ステータスバーに「[アドイン名]は[機能名]で作業中です」と表示されます。

このコード行は、TypeScriptコンパイラによって生成されます。この場合は、Node module '@ Microsoft/office-js-helpers'をロードするためです。tsconfig.jsonファイルを変更して、生成されないようにしました。行が、その後 '@ Microsoft/office-js-helpers'のインポートが失敗します。さらに、Webpack 4はこのファイルにwebpackBootstrapコードブロック関数を追加します。現時点では、function-file.tsへのインポートのみを回避できます。 Webpackでプロジェクトをビルドした後、「tsc」を実行します。

私の質問は、function-file.jsに、実行中の関数をブロックするコードが含まれないように、このプロジェクトをセットアップする正しい方法は何ですか？少なくとも明確な答えがない場合、このコード行が他のページが正常に機能するときに問題を引き起こすのはなぜですか？

以下は私のtsconfig.jsonで、その行を回避することはできますが、モジュールをロードすることはできません。

  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": ["es2015", "dom"],
    "typeRoots": ["node_modules/@types"]
  },

コンパイルされたfunction-file.jsを手動で2つのバージョンに編集します。

Object.defineProperty(exports, "__esModule", { value: true });
(function () {
    Office.initialize = function () { }
    };
})();
function writeText(event) {
    Office.context.document.setSelectedDataAsync('test');
    event.completed();
}

VS

(function () {
    Office.initialize = function () { }
    };
})();
function writeText(event) {
    Office.context.document.setSelectedDataAsync('test');
    event.completed();
}

最初のものにはこの問題がありますが、2番目のものにはありません。

node.jstypescriptoffice-jsoffice-js-helpers
4
mm90849491

昼食の話でJavaScriptに取り組んでいた同僚からのヒントを参考にして、function-file.tsで関数を呼び出すことを少し進めました。この仕事を手に入れるという私の道が、私と同じ痛みに苦しんでいる他の人々を助け、このプロジェクトで今も続けていることを願っています。

まず、function-file.jsが正しく機能するようになると、関数が機能しない場合に2つの異なる動作があることに気付きました。

  1. ステータスバーに「[アドイン名]は[関数名]で作業中です」と表示され、そのまま表示されます。関数は呼び出されたと思いますが、event.completed()の行に到達できませんでした。

  2. ステータスバーが同じメッセージを点滅させて空白になり、機能が見つからないことを示します。

このファイルを診断するためのより良い方法がある場合は、私を訂正してください。

Function-file.htmlの元のYeoman生成Webpack構成は、次のようなものです。

new HtmlWebpackPlugin({
        title: 'demo',
        filename: 'function-file/function-file.html',
        template: '../function-file/function-file.html',
        chunks: ['function-file']
}),

モジュールを使用するには、「vendor」（カスタムモジュールには必要ありませんが、「office-js-helpers」？）と「polyfills」エントリもチャンクに含める必要があります。 Mine Webpack4の構成は次のとおりです。

new HtmlWebpackPlugin({
  title: "demo",
  filename: "function-file/function-file.html",
  template: "../function-file/function-file.html",
  chunks: ["babel-polyfill", "function-file/function-file"]
}),

最後のステップは、function-file.tsで宣言された関数が見つかることを確認することです。つまり、Webpackにfunction-file.tsでグローバル関数をエクスポートするように依頼します。これは、TypeScript開発をハッキングしているのか、うまくやっているのかまだわかりません。サンプル関数-file.ts：

import * as OfficeHelpers from '@Microsoft/office-js-helpers';
(() => {
  Office.initialize = () => {};
})();

declare global {
  namespace NodeJS {
    interface Global {
      writeText: (event: Office.AddinCommands.Event) => void;
    }
  }
}

global.writeText = (event: Office.AddinCommands.Event) => {
  Office.context.document.setSelectedDataAsync('test');
  event.completed();
};

注意：office-js-helpersがインポートされても、一部の関数はまだ機能していません。カスタムモジュールをテストしましたが、正しく機能しています。

詳細な構成は通常のNodeJS + JavaScriptプロジェクトとは実際には異なるため、Office Webアドイン用のNodeJSでホストされるReact＆TypeScriptプロジェクトにいくつかの関数ファイルの例があることを本当に望んでいます。

1
mm90849491