Skip to content

Latest commit

 

History

History
107 lines (106 loc) · 5.2 KB

README.md

File metadata and controls

107 lines (106 loc) · 5.2 KB
Raw

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にトランスパイルする、という意味
      • 参考にしたサイト
    • リポジトリがぐっっっちゃぐちゃになったのでリセットしたい