你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
当耐特

腾讯AlloyTeam正式发布omi-cli脚手架 - 创建网站无需任何配置 0个回复 专栏 @ 框架与库

当耐特 发布于 2 月前

omi-cli

用户指南

文件目录

执行完omi init my-app,你可以看到会生成如下的基础目录结构

my-app/
  config
    project.js
    config.js
  src/
    component
    css
    img
    js
    libs
    page
      index
      page-b
    favicon.ico
  • config里的文件是webpack打包配置以及cdn、webserver,端口、route配置
  • src目录是我们的项目逻辑代码目录

npm 脚本

npm start

当你执行 npm start 会自动打开 http://localhost:9000/。现在你可以开始开发和调试,修改代码并且保存,浏览器会自动刷新显示最新的结果。

npm run dist

当你执行 npm run dist 之后,会创建一个dist目录,所有要发布的文件都在里面:

my-app/
  dist/
    chunk
    component
    css
    img
    js
    libs
    favicon.ico
    index.html
    page-b.html

component会保留其依赖的某些资源文件,chunk会输出分割出来的模板,怎么分割请往下看。

代码分割

为了优化性能,用户不需要一次性加载所有网页的依赖,可以在需要使用的时候再进行加载,所以这部分可以进行分割成单独的模块。
如下面的a.js:

import logo from '../../img/omi.png'

module.exports = { src: logo }

通过require.ensure进行按需使用,在用户点击事件触发之后才会进行加载a.js以及a.js的所有依赖,如下面代码所示:

class Hello extends Omi.Component {
  constructor(data, option){
      super(data, option)
  }

  handleClick(){
    require.ensure(['./a.js'], function() {
      var a = require("./a.js")
      document.body.innerHTML+=`<img src="${a.src}">`
    })
  }

  render() {
    return `
      <div class="App">
        <div class="App-header">
          <img src='${logo}' onclick="handleClick" class="App-logo" alt="logo" />
          <h2>Welcome to Omi</h2>
        </div>
        <p class="App-intro">
          To get started, edit <code>src/component/hello.js</code> and save to reload.
        </p>
         <p class="App-intro">
          {{name}}
        </p>
      </div>
    `
  }
}

上面是老的方式,webpack2更加建议使用一种"类函数式(function-like)"的 import() 模块加载语法。如:

import("./a.js").then(function(moduleA) {
  console.log(moduleA);
  document.body.innerHTML+=`<img src="${moduleA.src}">`
});

这样也能达到同样的效果,当然你也可以使用async/await

兼容 IE8

Omi框架是可以兼容IE8的。

由于使用了webpack-hot-middleware, 开发过程不兼容IE8,但是没关系,npm run dist生成的发布代码是兼容IE8。

需要主要的是,你需要在你的HTML里引用es5-sham或者es5-shim。如:

<!--[if lt IE 9]>
<script type="text/javascript" crossorigin="anonymous" src="//s.url.cn/qqun/xiaoqu/buluo/p/js/es5-sham-es5-sham.min.77c4325f.js"></script>
<![endif]-->

插入 CSS

通过import可以在js依赖相关的css文件,

import './index.css'

index.css会被提取到CSS文件当中,插入到head里面。

插入组件局部 CSS

import './index.css'

class Hello extends Omi.Component {
  constructor(data, option){
      super(data, option)
  }

  style(){
    return require('./_hello.css')
  }
  ...
  ...
}

Omi框架的style方法返回的字符串会生成为组件的局部CSS,_hello.css文件会在运行时动态插入到head里面。

需要特别注意的是: 组件的局部CSS必须使用下划线开头,如_xxx.css_aaa-bbb.css,不然会被识别成全局CSS插入到head里。

局部CSS使用图片

当然不是必须require外部的css文件,也可以直接写在style方法内,组件的依赖的图片资源也在组件的目录内:

my-app/
  src/
    component
        hello
            index.js
            pen.png
            pencil.png

对应的index.js如下所示:

class Hello extends Omi.Component {
  constructor(data, option){
      super(data, option)
  }

  style(){
    return `
        .icon-pen {
            background-image: url(${require('./pen.png')});
        }
        .icon-pencil {
            background-image: url(${require('./pencil.png')});
        }
    `
  }
  ...
  ...
}

插入 Less

通过import可以在js依赖相关的css文件,

import './xxx.less'

xxx.less会在转换成CSS,并且被提取到CSS文件当中,插入到head里面。

插入组件局部 Less

class Intro extends Omi.Component {
  constructor(data, option){
      super(data, option)
  }

  style(){
    return require('./_index.less')
  }

  render() {

    return `
          <p class="app-intro">
          To get started, edit <code>src/component/hello.js</code> and save to reload.
        </p>
    `
  }
}

export default Intro

Omi框架的style方法返回的字符串会生成为组件的局部CSS,_index.css文件会在运行时动态插入到head里面。

需要特别注意的是: 组件的局部Less必须使用下划线开头,如_xxx.css_aaa-bbb.css,不然会被识别成全局CSS插入到head里。

导入组件

如上面一节定义了Intro组件,利用复用。那么怎么在其他组件中使用?

import Intro from '../intro/index.js'

Omi.tag('intro',Intro)

class XXX extends Omi.Component {
  constructor(data, option){
      super(data, option)
  }

  render() {

    return `
      <div>
        <div>Hello Omi!</div>
        <intro></intro>
      </div>
    `
  }
}

export default XXX

通过Omi.tag('intro',Intro)把组件Intro生成为可以声明式的标签。注意便签名字要使用小写,多个单词使用中划线,如:my-introapp-header等。

特别需要注意的是每个组件必须要要闭合成一个节点,比如:

错误写法:

  render() {
    return `
        <div>a</div>
        <div>b</div>
    `
  }

正确写法:

  render() {
    return `
        <div>
            <div>a</div>
            <div>b</div>
        <div>`
  }

导入图片、字体、SVG 等文件

如上面的例子:

import logo from './logo.svg'

logo.svg会被动态转成base64。我们可以为每种类型都对应webpack里的一个loader来处理所有的文件类型。

修改配置

打开 config.js,其位置如下:

my-app/
  config
    project.js
    **config.js**

打开之后可以看到

module.exports = {
    "webserver": "//localhost:9000/",
    "cdn": "",
    "port": "9000",
    "route": "/news/",
};

修改 CDN 地址

module.exports = {
    "webserver": "//localhost:9000/",
    "cdn": "//s.url.cn/",
    "port": "9000",
    "route": "/news/",
};

修改 webserver 和 port

module.exports = {
    "webserver": "//localhost:9000/",
    "cdn": "//s.url.cn/",
    "port": "9001",
    "route": "/news/",
};

修改 route

module.exports = {
    "webserver": "//localhost:9001/",
    "cdn": "//s.url.cn/",
    "port": "9001",
    "route": "/user/",
};

Github

https://github.com/AlloyTeam/omi-cli

等待第一条回复
登录后回复,如无账号,请使用邀请码注册