CEP-Study

CEPのお勉強用リポジトリ

• CC Extension BuilderのtopcoatにてCEPをビルド
• バージョンはCEP 9.0
• 機能をあまり想定してなかった
• npm-scriptによるタスクランナーを設定したい
• node.jsを利用したい

作業の手順

1. manifest.xmlの修正
   1. InDesign用にコメントアウトを解除し <Host Name="IDSN" Version="10.0" /> と記述
      • 対応バージョンを範囲で指定する場合は配列表記 [10.0, 15.0] のようにする
   2. Node.jsを利用するために下記を記述

       <CEFCommandLine>
           <Parameter>--enable-nodejs</Parameter>
       </CEFCommandLine>

2. フォルダにnpmのrequestモジュールをインストール（HTTPリクエストとかしたい）
   • $ npm install request
   • CEPのフォルダ内にpackage-lock.jsonと node_modules が生成される
   • 面倒くさいのでnode_modulesは.gitignoreに追加した
3. Babelをインストール（新しいESで記述してES3にトランスパイル仕組みを用意したい）
   1. $ npm init
      • いろいろ聞かれるが全部Enterを押してpackage.jsonを生成した
   2. $ npm install --save-dev @babel/core @babel/cli @babel/preset-env
      • pachage-lock.jsonにいろいろ記述される（これひょっとして.gitignore入れたほうがいい？）
   3. Babelの設定ファイルを作成する
      • フォルダのルートにbabel.config.jsonを作成
      • 下記を記述

        {
            "presets": ["@babel/preset-env", "@babel/preset-typescript"]
        }

      • presetsについては下記の通り（参考）
        • @babel/preset-env: ECMAScript用
        • @babel/preset-flow: Flow用
        • @babel/preset-react: React用
        • @babel/preset-typescript: Typescript用
      • 今回はECMAScriptのバージョン違いに対応すればいいんだけど、将来的にTS書きたいとも思っているのでTS用も書いておく
      • 各presetに詳細な設定（targets指定）をしたい場合は配列で囲む
        ["@babel/preset-env", {<@babel/preset-envの設定値>}]
      • ES3対応のブラウザはIE6になるので、IE6をターゲットにする

        {
            "presets": [
                ["@babel/preset-env", {
                    "targets": {
                        "ie": 6
                    }
                }], "@babel/preset-typescript"]
        }

      • PolyfillとuseBuiltInsオプション
        • "useBuiltIns": "usage"を追加
        • ただし experimental らしい
        • Promiseとか使わない限りは気にしなくていいかもしれない……

        {
            "presets": [
                ["@babel/preset-env", {
                    "targets": {
                        "ie": 6
                    },
                    "useBuiltIns": "usage"
                }], "@babel/preset-typescript"]
        }

      • 試しにトランスパイルしたら怒られが発生した
        • useBuiltInsオプション使うならcore-jsをインストールせよとのこと
        • npm install --save core-js@3した
        • そういう問題でもなかった
          • @babel/preset-typescriptモジュールが見当たらないらしい
          • core-js@3をインストールしたけど怒られたので、babel.config.jsonから該当オプションを削除してみた

          {
              "presets": [
                  ["@babel/preset-env", {
                      "targets": {
                          "ie": 6
                      }
                  }]
              ]
          }

      • トランスパイル成功
4. 自動トランスパイルを仕込む
   • .babelrcを追加
   • 下記を記述

     {
           "presets": [
               ["env", {
                   "targets": {
                       "ie": 6
                   }
               }]
           ]
       }

   • ./node_modules/.bin/babel src/host.js -w -o jsx/host.jsxを実行
     • -wオプションでファイルをwatchする
     • -oオプションでファイルとして出力する
     • このコマンドはsrc/host.jsファイルが保存されたらjsx/host.jsxにトランスパイルする、という意味
     • 参考にしたサイト
   • リポジトリがぐっっっちゃぐちゃになったのでリセットしたい