tjs-loader

在 webpack 中像使用 .js 一样使用 .tjs、.tjson、.tjsx 文件

安装

npm i tjs-loader --save-dev

or

yarn add tjs-loader --dev

webpack 配置

// webpack.config.js 中的部分配置，只展示这个规则
module.exports = {
  module: {
    rules: [
      // 配置一个 tjs-loader 的规则
      {
        test: /\.tjs(on|x)?$/,
        use: 'tjs-loader',
        options: {
          // 编译相关的参数配置在这里
          tjsonTarget: 'module', // 全局使用 ES6 方式的模块导入导出语法
          tjsxReact: true, // 全局使用 react 的 tjsx 语法
          tjsxReactMemo: true, // 全局使用 react.memo 对 .tjsx 文件导出的函数进行包装
        },
      },
    ]
  },
  resolve: {
    extensions: [".js", ".json", ".tjs", ".tjson", ".tjsx"]
  }
}

示例

使用 tjs 文件

模块文件 - input.tjs:

module.exports = #
  if 1 > 0
    return 1
  else
    return 0

使用该模块的文件 - user.tjs:

const result = require('./input.tjs')
// 1

使用 tjson 文件

.tjson 文件默认会设置 option.tjsonMode = true

模块文件 - input.tjson:

// tjson 默认会检测是否是形如对象、数组或者是数值、字符串、表达式，并将其导出
a: 1
b: 2

使用该模块的文件 - user.tjs:

const result = require('./input.tjson')
// {
//   a: 1,
//   b: 2
// }

使用 tjsx 文件

.tjsx 文件默认会设置 option.tjsxMode = true

默认版本

模块文件 - input.tjsx:

// tjsx 模式下，默认有个 props 对象来传递参数
const 
  len = 0
= props

#ul
  for len as i
    #li data-index=i
      `${i}`

使用该模块的文件 - user.tjs:

// 这里我们为了演示，创建一个简单的创建元素的方法
function createElement(tagName, attrs, children)
  return 
    tagName
    attrs
    children

// 引入
const renderList = require('./input.tjsx')

// tjsx 模式（即默认模式）下，导出为一个箭头函数，参数分别为 创建元素的方法 和 用来数据传递的对象
const result = renderList(createElement, { len: 3 })
// [
//   {
//     "tagName": "ul",
//     "attrs": null,
//     "children": [
//       {
//         "tagName": "li",
//         "attrs": {
//           "data-index": 0
//         },
//         "children": [
//           "0"
//         ]
//       },
//       {
//         "tagName": "li",
//         "attrs": {
//           "data-index": 1
//         },
//         "children": [
//           "1"
//         ]
//       },
//       {
//         "tagName": "li",
//         "attrs": {
//           "data-index": 2
//         },
//         "children": [
//           "2"
//         ]
//       }
//     ]
//   }
// ]

react 版本

模块文件 - input.tjsx:

react 版本的 tjsx 模式文件中默认会导入 react 的 npm 包，所以需要先安装 react

// 这里使用一个注释命令来临时设置一个参数，也可以在loader options里全局配置
//@tjs-set tjsxReact true

// react 模式下，默认有个 props 对象来传递参数，且默认导入 React 对象
const 
  useState
= React

let 
  lenDefault = 3
= props

const [len, setLen] = useState(lenDefault)

#div
  #button onClick=(() => setLen(len + 1))
    "add"
  #ul
    for len as i
      #li data-index=i
        `${i}`

使用该模块的文件 - user.tjs:

// 引入依赖
// 该页面有 react 版本的 tjsx 语法，所以需要手动导入 react
const React = require('react')
const ReactDom = require('react-dom')
const RenderList = require('./input.tjsx')

// tjsxReact 模式下，默认导出为一个函数组件，下面可以直接使用
// 比如
//@tjs-set tjsxReact true
ReactDom.render((#RenderList), document.getElementById('app'))

其他

使用 tjs-parser 编译，全部配置参数 可以查看该模块说明 在webpack中搭配 tjs-loader 进行开发 使用 在线工具 试一试

交流QQ群： 363319058 邮件交流： [email protected]