san-anode-loader
v0.3.2
Published
一个将san单文件组件中的template编译为anode或apack的loader
Downloads
21
Readme
san-anode-loader
san-anode-loader
是一个可以将 san 单文件组件或js中的模版部分编译为 aPack 或 aNode 形式的 webpack loader
合并了此项目:https://github.com/luoyimaid/san-template-loader
安装
使用 npm:
npm i san-anode-loader
使用 yarn:
yarn add san-anode-loader
使用
examples 中编写了一个最简单的、完整的项目示例。
下面是配置文件:
{
test: /\.pug$/,
use: [
{
loader: "html-loader",
},
{
loader: 'san-anode-loader',
options: {
compileTemplate: "aNode",
},
},
{
loader: "pug-plain-loader",
},
],
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
esModule: false,
minimize: false,
},
},
{
loader: 'san-anode-loader',
options: {
compileTemplate: "aPack",
},
},
],
},
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
plugins: [
require.resolve(
'@babel/plugin-proposal-class-properties'
),
require.resolve(
'san-hot-loader/lib/babel-plugin'
),
],
presets: [
[
require.resolve('@babel/preset-env'),
{
targets: {
browsers: '> 1%, last 2 versions',
},
modules: false,
},
],
],
},
},
{
loader: 'san-anode-loader',
options: {
compileTemplate: 'aPack',
mode: 'compact',
},
},
],
},
处理单文件组件
当使用如 pug 类的 html 模版时,确保先走模板的 loader 然后再走 san-anode-loader,因为 san-loader 不能编译不是标准 html 的代码片段。
处理 js 中的template
mode代表模式:
严格模式 strict
兼容模式 compact
严格模式下,template 不可以出现字符串表达式,否则会报错,兼容模式下,会跳过有字符串表达式的 template
注意事项
目前兼容到 webpack5,但因为 html-loader2 有兼容性问题,所以同样的项目配置在 5 中会有问题,请移步 html-loader 讨论区
问题反馈
可移步 san discussion 讨论区
License
MIT © vanishcode
MIT © luoyimaid