mithril.js 秘银轻量级jsx库

2021-11-25

可以跟react一样动态渲染模块化处理的库，十分的轻量级，包含路由，数据绑定
如果使用jsx需要使用打包工具解析

入门

https://mithril.js.org/

1	npm install mithril --save //安装

开始

创建一个节点

简单的创建一个节点后，之后就跟jsx相同的写法，如果要使用jsx需要打包工具转换

import m from 'mithril';

m.render(
  document.body,
  m('div','hello world')
);

upload successful

路由

接下来创建简单的路由

// /#!/age
m.route(document.getElementById('content'), '/user', {
  '/user': {
    view: () => m('div', ['张三', block1]),
  },
  '/age': {
    view: () => m('div', ['18', block2]),
  },
  '/jsx': {
    view: () => m('div', ['this is jsx demo', block3]),
  },
});

这些view内容会渲染着#content内，跳转例子：比如www.xxx.com/#!/user 就会到/user只想的view界面，这里的第二个参数/user是默认显示路由

数据双向绑定

参考 https://mithril.js.org/index.html#live-example1
在使用monut绑定对象{view:()=>jsx}的时候会监听变量变化进行重新渲染

打包，解析jsx代码

webpack.config.js

const path = require('path');

module.exports = {
  entry: './public/index.js', //打包文件，打包你上面写的代码
  output: {
    filename: 'bundle.js', //输出文件命名
    path: path.resolve(__dirname, 'dist'), //输出文件地址__dirname是你工作环境根目录
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader', //使用babal去打包秘银的渲染器，这个比较重要
        exclude: /node_modules/,
      },
    ],
  },
};

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "m", //对于 m这个函数 其中的jsx将会使用上面一个插件解析
        "pragmaFrag": "'['" // 其中m函数中对于片段jsx会用 [] 包裹，所以用 [ 来标识数组的第一个符号，判断数组内的jsx
      }
    ]
  ]
}