README

awesome-open 强大的开发者工具：Open

用于开发环境打开组件所在的文件

目前支持 Vue 和 React

支持情况

React 项目支持 react 16, react 17, (15 及之前的版本未进行测试)
Vue 项目支持 vue 2, vue 3

安装

使用 npm 安装（推荐）

npm i -D @xiao-edu/open

# 或者您更喜欢yarn
yarn add @xiao-edu/open -D

或者使用 CDN 引入

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@xiao-edu/open/dist/opener.min.js"></script>
<!-- 或者使用 unpkg -->
<script src="https://unpkg.com/@xiao-edu/open/dist/opener.min.js"></script>

使用

前端部分

在应用初始化的任意文件中引入 open 的前端部分即可

在 src/index.js 中引入：

import Opener from '@xiao-edu/open'

const open = new Opener({
  // config...
})

open.init()

举个例子，如 react 项目：

// src/index.js

import react from 'react'

import Opener from '@xiao-edu/open'

const open = new Opener({
  // config...
  type: 'react',
  src: react
})

open.init()

vue 项目：

// src/index.js

import vue from 'vue'

import Opener from '@xiao-edu/open'

const open = new Opener({
  // config...
  type: 'vue',
  src: vue
})

open.init()

开发服务器部分

配置一个 open-server：

引入 open 的后端部分即可

(1) 如果你使用 webpack 的 devServer 作为你的开发服务器，你可以这样写：

如在 webpack.config.js 中：

const launchEditor = require('@xiao-edu/open/server')

devServer: {
  before(app, server){
    // https://gitlab.xinghuolive.com/lihao/awesome-open/blob/master/README-server.md
    app.use('/__open-in-editor', launchEditor('code'))
  }
}

(2) 或者你不想侵入 webpack 的开发服务器：

你可以利用 cr 的 open-server：

安装一下 cr 命令行工具：

npm i -g @xiao-edu/cr

然后启动 cr 的 open-server：

cr open --server
// or
cr o -s

然后你就可以将 open 的接口 api 前缀改为：

// src/index.js

import react from 'react'

import Opener from '@xiao-edu/open'

const open = new Opener({
  // config...
  type: 'react',
  src: react,
  api: 'http://localhost:5000/open'
})

open.init()

到这里就完成啦，去试试点击页面上的 open 按钮吧！

配置

interface IConfig {
  /** 类型，目前暂时只支持vue和react */
  type?: 'vue' | 'react'
  /** 构造函数，Vue或者React */
  /** src?: () => {} */
  src?: unknown
  /** 打开文件时的请求api前缀，默认为'/__open-in-editor' */
  api?: string
  /** 是否不打印log信息 */
  slient?: boolean
  /** 是否阻止鼠标右键的默认行为，默认是false */
  isPreventDefaultForRightClick?: boolean
  /** 显示组件名的规范，默认是'class' */
  componentNameStyle?: 'class' | 'kebab' | 'original'
}

代码贡献

Fork 代码!
创建自己的分支: git checkout -b feat/xxxx
提交你的修改: git commit -am 'feat(function): add xxxxx'
推送您的分支: git push origin feat/xxxx
提交：pull request

Usage no npm install needed!