以下に、Atom用のパッケージを作成する例を示します。
先ほど書いたライブラリに基づいてmarionettejsファイルを生成するパッケージを作成します。
パッケージを作成するには、 package-generatorを使用することをお勧めします （Atomにパッケージとしてインストールする必要があります）。
- メニュー項目「
Packages->Package Generator->Generate Atom Package
」に移動します。 - 名前を入力してください。 私の場合、
atom-marionettejs-cli
- 入る
パッケージを編集用に開きます。
Preferences->Packages
-
Preferences->Packages
-
Preferences->Packages
見つけて開き、
View Code
素晴らしい。 次に、メニューを編集します。
./menus/package-generator.cson
に行き、 ドキュメントを見て、自分用にカスタマイズします。
私のpackage-generator.cson
'context-menu': 'atom-text-editor': [ { 'label': 'Generate marionettejs application' 'command': 'atom-marionettejs-cli:generate-app' } ] 'menu': [ { 'label': 'Packages' 'submenu': [ 'label': 'MarionetteJS CLI' 'submenu': [ { 'label': 'Generate marionettejs application' 'command': 'atom-marionettejs-cli:generate-app' } { 'label': 'Generate marionettejs file' 'command': 'atom-marionettejs-cli:generate-file' } { 'label': 'Set type' 'command': 'atom-marionettejs-cli:set-type' } ] ] } ]
そのため、ユーザーがリストから生成したいファイルを選択できるようにします。 これを行うには、 SelectListViewを使用します 。
コード自体を表示する
{SelectListView} = require 'atom-space-pen-views' items = 'type': [ { label: 'ES6' command: 'es6' }, { label: 'CommonJS' command: 'cjs' }, { label: 'RequireJS' command: 'rjs' } ], 'file': [ { label: 'Layout' command: '--layout' }, { label: 'Collection' command: '--collection' }, { label: 'Model' command: '--model' }, { label: 'Router' command: '--router' }, { label: 'Object' command: '--object' }, { label: 'Item View' command: '--itemView' }, { label: 'Collection View' command: '--collectionView' }, { label: 'Composite View' command: '--compositeView' }, { label: 'Behavior' command: '--behavior' }, ] module.exports = class AtomMarionettejsCliView extends SelectListView mode: null viewForItem: (item) -> "<li data-command='#{item.command}'>#{item.label}</li>" showModalPanel: (@mode) -> @panel ?= atom.workspace.addModalPanel(item: this, visible: false) @addClass('overlay from-top') @setItems(items[@mode]) @panel.show() @focusFilterEditor() cancelled: -> @panel.hide() getCommand: -> selectedItem = this.getSelectedItemView(); return selectedItem.data().command;
これがライブビューの表示です 
次に、メインファイル（
./lib/atom-marionettejs-cli
）を検討します。 ところで、すべてを機能させたい場合、メインファイルを別の場所に置くか、別の名前を含める必要がある場合は、
package.json
行を変更するだけです。
"main": "./lib/atom-marionettejs-cli"
パッケージのアクティベーション中に、ビューを作成し、メニュー項目をクリックするとトリガーされるイベントをサブスクライブします。
... { 'label': 'Generate marionettejs application' 'command': 'atom-marionettejs-cli:generate-app' } ...
activate: () -> @modalPanel = new AtomMarionettejsCliView() @subscriptions = new CompositeDisposable @subscriptions = atom.commands.add 'atom-workspace', 'atom-marionettejs-cli:generate-app': => @attach('app') 'atom-marionettejs-cli:generate-file': => @attach('file') 'atom-marionettejs-cli:set-type': => @attach('type')
ここで、シート内のクリックで何らかの形でイベントを処理する必要があります。
@modalPanel.confirmed = -> path = getPath() command = @getCommand(); if @mode is 'file' fileName = filePrefix + command args = ['g', command, fileName, path] else args = ['s', command]; cli.run(args); @panel.hide()
confirmed
メソッドは、SelectListViewのメソッドです。 CLI呼び出し（
cli.run()
）が異なるファイルに分散しないように、ここでレンダリングされます。
メインファイルコード
AtomMarionettejsCliView = require './atom-marionettejs-cli-view' {CompositeDisposable, BufferedNodeProcess} = require 'atom' filePrefix = 'marionette-' cli = require 'marionette-cli/lib/cli' getPath = -> editor = atom.workspace.getActivePaneItem() file = editor?.buffer.file projectPath = atom.project.getPaths()[0] # if opened file or project doesn't exist if !file && !projectPath throw new Error ('Create project or open some file') # get path of opened file path = editor?.buffer.file.path # if no opened tabs if !path return projectPath regexp = /(.*\/).*/g # get path to file regexp.exec(path)[1] module.exports = modalPanel: null mode: null subscriptions: null activate: () -> @modalPanel = new AtomMarionettejsCliView() @subscriptions = new CompositeDisposable @subscriptions = atom.commands.add 'atom-workspace', 'atom-marionettejs-cli:generate-app': => @attach('app') 'atom-marionettejs-cli:generate-file': => @attach('file') 'atom-marionettejs-cli:set-type': => @attach('type') @modalPanel.confirmed = -> path = getPath() command = @getCommand(); if @mode is 'file' fileName = filePrefix + command args = ['g', command, fileName, path] else args = ['s', command]; cli.run(args); @panel.hide() deactivate: -> @modalPanel.destroy() @subscriptions.dispose() attach: (@mode) -> switch @mode when 'app' @generateApp() when 'file', 'type' @modalPanel.showModalPanel(@mode) generateApp: -> appPath = getPath() + '/app' cli.run(['new', appPath]);
いくつかの小さなヒント：
- デバッグにはコンソールを使用します（表示-
View->Developer->Toggle Developer Tools
） - ファイルに変更を加えた後、ウィンドウを再起動して（
View->Developer->Reload Window
表示]-View->Developer->Reload Window
ウィンドウの再View->Developer->Reload Window
）、コードが機能していることを確認します - サードパーティライブラリを使用する場合
Refused to evaluate a string as JavaScript because 'unsafe-eval'...
が発生する可能性があるRefused to evaluate a string as JavaScript because 'unsafe-eval'...
などのエラーが発生します。 それに対抗するには、 抜け穴を使用することができます
ドキュメントを作成し、
package.json
を整理してリリースできます。
git commit -am 'first release' apm publish --tag v0.1.0 minor
Githubリポジトリ
atom.ioのパッケージ
ご清聴ありがとうございました。
PS厳密に判断しないでください、これは
coffeescript
私の最初の経験でした。