Taro使用towxml问题修复

859 阅读1分钟

使用Taro4开发小程序,因为要渲染markdown所以使用了towxml,按照官网打包改名之后放入src目录下,但是运行之后报错运行不起来

  1. 报错信息: screenshot_2024-12-24_08-57-56.png

注释掉usingComponents: { towxml: '../../towxml/towxml', },之后可以运行,但还需要复制towxml到dist目录,如果通过build的话这样是无法使用的

  1. 修复方法:
// config/index.js

mini: {
    webpackChain(chain) {
      chain.module
        .rule('ignore-towxml')
        .test(/[\\/]towxml[\\/].*\.(wxml)$/)
        .use('null-loader')
        .loader(require.resolve('null-loader'));
      chain.module
        .rule('towxml-js')
        .test(/[\\/]towxml[\\/].*\.js$/)
        .use('babel-loader')
        .loader(require.resolve('babel-loader'))
        .options({
          presets: [
            ['@babel/preset-env']
          ]
       });
      chain.plugin('copy-towxml')
        .use(require('copy-webpack-plugin'), [{
          patterns: [
            {
              from: path.resolve(__dirname, '..', 'src/towxml'),
              to: path.resolve(__dirname, '..', 'dist/towxml'),
              // 强制复制并覆盖
              force: true,
            }
          ]
        }]);
    },

  • 使用 null-loader 处理 .wxml 文件,防止 webpack 解析这些文件中的模板语法

  • 对 towxml 的 js 文件使用 babel-loader 进行处理

  • 复制文件并覆盖

  • 如果还没有安装 null-loader,需要先安装:

npm install null-loader --save-dev