webpack + art-template-经验.txt
【重点】【官方文档】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）使用图片等情况
方式一：使用模板的输出字符串，比如：<img src="{{'./image.png'}}">
		1> 相对于最终生成html的位置，即在webpack配置的new htmlWebpackPlugin里的filename属性对应的位置。
		2> 此方式webpack不做特殊处理，仅输出字符串。

方式二【写法5测试成功】：常规方式，比如下面两种：
写法1：<img src="./image.png"> 错误：最后输出 <img src="[object Module]">
写法2：<img src="{require('./image.png')}"> 错误：最后输出 <img src="{require('./image.png')}">
写法3：<img src="#{require('./image.png')}"> 错误：最后输出 <img src="#{require('./image.png')}">
写法4：<img src="{{require('./image.png')}}"> 错误：最后输出 <img src="{&#34;default&#34;:&#34;../../../../../assets/S0000/O0000/static/_webpack/images/item.png&#34;}">
写法5：<img src="{{require('./image.png').default}}"> 【正确】：最后输出 <img src="../../../../../assets/S0000/O0000/static/_webpack/images/item.png">
		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报错 https://github.com/aui/art-template/issues/327

	2）windows 10 下编译问题
windows 10 下编译问题 https://github.com/aui/art-template/issues/543
	3）Can't resolve  "node_modules\art-template\lib\runtime.js"
运行出问题，路径找错了，多了一个 node_modules https://github.com/aui/art-template-loader/issues/32	
		
已知解决此问题无效的方法：
	全局安装npm -g i art-template

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