webpack + art-template-经验.txt

[OpenMIS]

【重点】【官方文档】https://aui.github.io/art-template/webpack/
🔷art-template-loader
开源位置：https://github.com/aui/art-template-loader ⌚️:3 ⭐️:95 Fork:30
npm：https://www.npmjs.com/package/art-template-loader Weekly Downloads 298

1、使用art-template-loader
【重点】【官方文档】https://aui.github.io/art-template/webpack/
1）在webpack环境，注入过滤器方法。
【重点】【官方文档】https://aui.github.io/art-template/webpack/index.html#Filter
2）【重点】使用npm安装art-template后，必须把
把项目下的node_modules\art-template\lib复制到磁盘根目录，也是对应 盘符:\node_modules\art-template\lib
否则载入art模板时会报错：Can't resolve "node_modules\art-template\lib\runtime.js"
1> 具体参看下面的 已知问题 3）Can't resolve "node_modules\art-template\lib\runtime.js"

2、在webpack的htmlWebpackPlugin环境使用art-template
1）官方示例的<%= htmlWebpackPlugin.options.title %>在webpack的htmlWebpackPlugin环境使用art-template对应的写法如下：
{{$data.htmlWebpackPlugin.options.title}} 或者 <%= $data.htmlWebpackPlugin.options.title %>
2）支持调试
【重点】【官方文档】 https://aui.github.io/art-template/webpack/#Debug
1> 【未测试成功】
3）在webpack的htmlWebpackPlugin环境，调用JavaScript方法。
1> 【注意】使用下面两种官方的方法都无效，因为它们也不是针对在webpack的htmlWebpackPlugin环境
https://aui.github.io/art-template/webpack/index.html#Filter
https://aui.github.io/art-template/zh-cn/docs/syntax.html#%E8%BF%87%E6%BB%A4%E5%99%A8
1] 即下面在webpack的js配置文件里写如下两种方式都无效：
var runtime = require("art-template/lib/runtime")
runtime.defaults.imports.test = function (data2) {
return data2.toString() + " world"
}

var template = require("art-template")
template.defaults.imports.test = function (data2) {
return data2.toString() + " world"
}
2> 有效的方式，直接在htmlWebpackPlugin的构造里使用templateParameters属性，把JavaScript方法以箭头函数的方式传入。
不能使用function定义方法的方式传入，那样会无效。
1] webpack的js配置文件示例
{...
plugins: [...
new htmlWebpackPlugin({
template: "src/template/TaobaoTmall.art.html",
filename: "../../../../../Public/HTML/S0000/O0000/pages/TaobaoTmall.html",
chunks: ["jsBridge", "view"],
templateParameters:{
test: (a, b) => a + b, //【成功】成功注入test方法
test2: function (a, b) { //【成功】成功注入test2方法
return a + b
},
assign: (object1, object2) => Object.assign({}, object1, object2), //【问题】成功注入assign方法，但是$data不支持Object.assign方法。
pageTitle: pageTitle.taobaoTmall,
siteTitleBase: "【助手管理】",
},
})]
}

//【问题】成功注入assign方法，但是$data不支持Object.assign方法。模板报错如下：
TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Compiler'
--- property 'root' closes the circle

		2] 在模板里调用时，与调用属性不一样（前面加data.），而调用方法前面不能加data，否则编译模板会失败，提示：
		Cannot read property 'test' of undefined
		正确的调用方式如下：

{{ test(1,2) }}
<%=test(2,3) %>
<%=test2(2,3) %>
3] 参看 art-template-经验.txt 15、除过滤器外，另外一种在模板里使用JavaScript函数的方法：在模板数据里定义一个属性，值为箭头函数的方式

3）已知的情况
	1> 使用上面“在webpack的htmlWebpackPlugin环境，调用JavaScript方法”

console.log //在运行webpack的命令行里输出
__dirname //webpack配置文件所在的绝对路径

4）require方法

方式一：{{require('./logo.png').default}}
1> 路径相对于当前html的img所以的模板的位置，即使这个模板在另外的目录模板引用此模板也没有关系，
还是以相对于当前html的img所以的模板的位置。

方式二：{{$imports.require('./package.json')}}
1> 路径是相对于项目的根目录，必须在前面使用./或者../
2> 【注意】类似JavaScript、Typescript的import，由于在此时为应用webpack的配置，仅能导入.js、.json，
不能导入其他格式，比如图片等。

5）使用图片等情况

方式一：使用模板的输出字符串，比如：
1> 相对于最终生成html的位置，即在webpack配置的new htmlWebpackPlugin里的filename属性对应的位置。
2> 此方式webpack不做特殊处理，仅输出字符串。

方式二【写法5测试成功】：常规方式，比如下面两种：
写法1： 错误：最后输出
写法2： 错误：最后输出
写法3： 错误：最后输出
写法4： 错误：最后输出
写法5： 【正确】：最后输出
1> 在webpack配置的图片的file-loader或者url-loader，类似如下：
module: {...
rules: [...
{
test: /.(gif|png|jpe?g)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]", //默认为hash
outputPath: "images/",
},
},
],
},...]
}
2> 需要在webpack配置output里，必须配置publicPath或者在file-loader|url-loader的options配置publicPath，
可以使用https://、http://、//、/开头的绝对路径，或者是相对于生成输出目录相对于网页的位置。
否则会出现错误：
if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
1] 写法1、写法4 图标正常生成、但最终html里有webpack报的错误。
webpack打包时Error: Automatic publicPath is not supported in this browser https://blog.csdn.net/sunlando/article/details/109043570
解决 Automatic publicPath is not supported in this browser 错误 https://blog.csdn.net/weixin_50119334/article/details/109453897
3> 路径相对于当前html的img所以的模板的位置，即使这个模板在另外的目录模板引用此模板也没有关系，
还是以相对于当前html的img所以的模板的位置。

	4> 【结论】
		1] 此方式的主要目的为生成hash的文件名，如果不使用hash的文件名，此方式意义不大。
		2] 写法5正确
6）options
	1> 参看 art-template-loader\src\index.js 源代码
	2> 一些选项的示例

options: { imports: require.resolve("art-template/lib/runtime") }
3> 官方文档中没有说明的选项
htmlResourceRoot
htmlResourceRules
rules
ignore

【已知问题】
1）script里的src或者image的src必须使用src="{{'js/test.js'}}" src="{{'image/test.png'}}"，否则htmlWebpackPlugin尝试解析src的路径，会报无法载入此引用的JavaScript模块问题。
样式单link无此问题。在非webpack的htmlWebpackPlugin环境的script也无此问题。
在官方使用pug模板的示例里使用 img(src="#{require('./logo.png')}")
https://github.com/jantimon/html-webpack-plugin/tree/master/examples/pug-loader
time.pug https://github.com/jantimon/html-webpack-plugin/blob/master/examples/pug-loader/time.pug
1> 经过测试也存在类似的方法：{{$imports.require('./package.json')}}
路径是相对于项目的根目录，必须在前面使用./或者../

3、已知问题
1）webpack下require('art-template')打包时fs报错
webpack下require('art-template')打包时fs报错 #327

2）windows 10 下编译问题

windows 10 下编译问题 #543
3）Can't resolve "node_modules\art-template\lib\runtime.js"
运行出问题，路径找错了，多了一个 node_modules goofychris/art-template-loader#32

已知解决此问题无效的方法：
全局安装npm -g i art-template

解决方法：
把项目下的node_modules\art-template\lib复制到磁盘根目录，也是对应 盘符:\node_modules\art-template\lib

[Eling486]

请问【Can't resolve "node_modules\art-template\lib\runtime.js"】这个问题有其他解决方法吗，复制到根目录也太难受了吧

[wananshine]

+1 同问，请问【Can't resolve "node_modules\art-template\lib\runtime.js"】这个问题有其他解决方法吗？，复制到根目录有点恶心