模块导出以及一些疑问

[image72]

omi-cli 生成项目代码

src/elements/app-intro/index.js

import { tag, WeElement } from 'omi'
import style from './_index.css'

@tag('app-intro')
class AppIntro extends WeElement {
  css() {
    return style + `
    code{
      color: ${Math.random() > 0.5 ? 'red' : 'blue'}
    }`
  }

  render(props, data) {
    return (
      <p class="app-intro">
          To get started, edit <code>src/elements/*/*.*</code> and save to reload.
        </p>
    )
  }
}

src/elements/app/index.js

import { tag, WeElement } from 'omi'
import logo from './logo.svg'
import style from './_index.css'
import '../app-intro'

@tag('my-app')
class MyApp extends WeElement {

  static get data() {
    return { name: '' }
  }

  clickHandler = () => {
    this.store.rename('Omi V4.0')
  }

  css() {
    return style 
  }

  render(props, data) {
    return (
      <div class="app">
        <header class="app-header">
          <img src={logo} onClick={this.clickHandler} class="app-logo" alt="logo" />
          <h1 class="app-title">Welcome to {data.name}</h1>
        </header>
        <app-intro></app-intro>
      </div>
    )
  }
}

为什么没有模块导出， 但是omi-cli 正确使用webpack 完全编译了， 是使用了什么黑魔法吗？
tag my-app 只在组件内部注解了名称， 但是文件夹名称又是app. 是omijs 创造了一种新的模块化 components 吗。 我在使用其他组件时 是不是也需要翻进代码里查找@tag.
omijs components 是以目录名为组织还是以@tag为组织单个组件？或者index.js ? main.js ?
一个js文件了可以写多个@tag吗？

为什么omi-cli 中生成代码有的是2个空格锁进， 有的是4个，8个锁进？
你们如何解决代码被eslint 提示 'AppIntro' is declared but never used.？

[dntzhang]

明天回复你

[dntzhang]

• omi-cli 中的缩进问题已经全部 eslint 了
• 没有任何黑魔法，直接使用 create-react-app 的脚手架稍微改了下
• 一个js文件确实可以写多个
• eslint 这个我不知道，也没遇到

[image72]

config/entry.js
config/webpack.config.dev.js 锁进就是不一样的

关于@tag 我问的意思是： omijs components 不需要遵守commonjs或者es6 modules 吗？

---

src/index.js
my-app 从哪里来的？ 我需要去翻看源代码里的@tag

import { render } from 'omi'
import './assets/index.css'
import './elements/app'
import registerServiceWorker from './assets/register-service-worker'
import store from './store/app-store'

render(<my-app />, '#root', store)
registerServiceWorker()

---

ESLint 提示你的配置从不报么？

[dntzhang]

哦，这个确实报错。我目前强行忍着这个错

[dntzhang]

import { WeElement, define } from "omi";

...
...

define("xx-xx", XXXX)

也可以使用 define来规避这个报错

[image72]

我觉得这不是个用什么来避免报错的问题， 而是omijs component使用哪一种模块化方案的问题 。
例如下面的是es6 modules方式，其他commonjs,amd 不一一列举。
有导入，有导出。 若没有导出 除非这个里面的方面都是自执行的，其他js文件不能引用的， 或者直接挂载在global 上的[现在应该没有这么野蛮的方式了吧]。

从上述代码中看到component没有导出， 那就不能把这个component 称为component。以至于能不能后续支持parcel, gulp, browserify, rollup等打包工具

import foo, {
  bar
} from 'foo';

export default class Sub extends bar{
 
}

[image72]

我觉得一个模块比较理想的形式应该是这样的
即便只是看起来效果

import { tag, WeElement } from 'omi'
import logo from './logo.svg'
import style from './_index.css'
**import AppIntro** from '../app-intro'

@tag('my-app')
**export default** class MyApp extends WeElement {

  static get data() {
    return { name: '' }
  }

  clickHandler = () => {
    this.store.rename('Omi V4.0')
  }

  css() {
    return style 
  }

  render(props, data) {
    return (
      <div class="app">
        <header class="app-header">
          <img src={logo} onClick={this.clickHandler} class="app-logo" alt="logo" />
          <h1 class="app-title">Welcome to {data.name}</h1>
        </header>
        <app-intro></app-intro>
      </div>
    )
  }
}

[dntzhang]

额。为啥要导出？为啥不能支持 parcel, gulp, browserify, rollup，webpack？已经支持了啊

@tag('my-app')就是一个注册 自定义 element 的，你导入了才会注册，不导入不会注册。

import './xxx.css' 也不需要导出啊

你一定要导出的话其实也可以

export default function registe(){
 define('xx-xxx',ctor)
}

但是，这不是多此一举吗？

[image72]

import 'xxx.css' 的例子不适用与js component。

import 'xxx.css'
// css-loader extract css to common.css
import styles from 'xxx.css';
// css-loader extract css to string.
css() {
  return {styles}
}

我看到了@tag 的实现， 其实背后就是customElements.define('app-intro', AppIntro);
但是来自于react, vue 的试用者应该会比较多， 对于他们来说 模块都是需要导出的。我在此多论述无意义。

还希望能后续补充下rollup或者parcel 的配置方式

[dntzhang]

我觉得导出意义不大，不过我开始也不习惯。但是少写几行代码何乐而不为，反正其他拆包、按需加载、延迟加载 ，tree shaking 都是同样支持...

[dntzhang]

@image72
激活一下，最近推荐的方式：

import { render, WeElement, define } from 'omi'

define('my-counter', class extends WeElement {
    static observe = true
    
    data = {
      count: 1
    }

    sub = () => {
      this.data.count--
    }

    add = () => {
      this.data.count++
    }

    render() {
      return (
        <div>
          <button onClick={this.sub}>-</button>
          <span>{this.data.count}</span>
          <button onClick={this.add}>+</button>
        </div>
      )
    }
  })

render(<my-counter />, 'body')

[dntzhang]

这样eslint没有报错了

[image72]

有没有办法让他先导出 后绑定

// components/my-counter.js
export default class extends WeElement {
    static observe = true
    data = { count: 1 }
    sub = () => { this.data.count-- }
    add = () => { this.data.count++ }
    render() {
      return (
        <div>
          <button onClick={this.sub}>-</button>
          <span>{this.data.count}</span>
          <button onClick={this.add}>+</button>
        </div>
      )
    }
}

// app.js
import MyCounter from 'components/my-counter';
render(<my-counter/>)

// require, import hook

[dntzhang]

没有