tjs-loader

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

安装

``shell
npm i tjs-loader --save-dev
`
or
`shell
yarn add tjs-loader --dev
`

webpack 配置

`js
// 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"]
}
}
`

示例

$3

模块文件 - input.tjs:
`js
module.exports = #
if 1 > 0
return 1
else
return 0
`
使用该模块的文件 - user.tjs:
`js
const result = require('./input.tjs')
// 1
`

$3

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

模块文件 - input.tjson:
`js
// tjson 默认会检测是否是形如对象、数组或者是数值、字符串、表达式，并将其导出
a: 1
b: 2
`
使用该模块的文件 - user.tjs:
`js
const result = require('./input.tjson')
// {
// a: 1,
// b: 2
// }
`

$3

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

#### 默认版本

模块文件 - input.tjsx:
`js
// tjsx 模式下，默认有个 props 对象来传递参数
const
len = 0
= props

#ul
for len as i
#li data-index=i
${i}
`
使用该模块的文件 - user.tjs:
`js
// 这里我们为了演示，创建一个简单的创建元素的方法
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
`js
// 这里使用一个注释命令来临时设置一个参数，也可以在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:
`js
// 引入依赖
// 该页面有 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
邮件交流： mrbrick@yinhe.org