基于taro自己开发第三方ui库, 打包出的代码发布成npm包,在小程序中能够正常展示,在H5中单位没有适配,还是px而不是rem



  • 这个是config的配置

    if (process.env.TARO_BUILD_TYPE === "ui") {
      Object.assign(config.h5, {
        enableSourceMap: false,
        enableExtract: false,
        enableDll: false
      });
      config.h5.webpackChain = chain => {
        chain.plugins.delete("htmlWebpackPlugin");
        chain.plugins.delete("addAssetHtmlWebpackPlugin");
        chain.merge({
          output: {
            path: path.join(process.cwd(), "dist", "h5"),
            filename: "index.js",
            libraryTarget: "umd",
            library: "ui-images"
          },
          externals: {
            nervjs: "commonjs2 nervjs",
            classnames: "commonjs2 classnames",
            "@tarojs/components": "commonjs2 @tarojs/components",
            "@tarojs/taro-h5": "commonjs2 @tarojs/taro-h5",
            weui: "commonjs2 weui"
          },
          plugin: {
            extractCSS: {
              plugin: MiniCssExtractPlugin,
            }
          }
        });
      };
    }
    const config = {
      projectName: "project",
      date: "2020-4-27",
      designWidth: 750,
      deviceRatio: {
        "640": 2.34 / 2,
        "750": 1,
        "828": 1.81 / 2
      },
      sourceRoot: "src",
      outputRoot: "dist",
      babel: {
        sourceMap: true,
        presets: [
          [
            "env",
            {
              modules: false
            }
          ]
        ],
        plugins: [
          "transform-decorators-legacy",
          "transform-class-properties",
          "transform-object-rest-spread",
          [
            "transform-runtime",
            {
              helpers: false,
              polyfill: false,
              regenerator: true,
              moduleName: "babel-runtime"
            }
          ]
        ]
      },
      plugins: [],
      defineConstants: {},
      mini: {
        postcss: {
          pxtransform: {
            enable: true,
            config: {}
          },
          url: {
            enable: true,
            config: {
              limit: 10240 // 设定转换尺寸上限
            }
          },
          cssModules: {
            enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
            config: {
              namingPattern: "module", // 转换模式,取值为 global/module
              generateScopedName: "[name]__[local]___[hash:base64:5]"
            }
          }
        }
      },
      h5: {
        publicPath: "/",
        staticDirectory: "static",
        postcss: {
          autoprefixer: {
            enable: true,
            config: {
              browsers: ["last 3 versions", "Android >= 4.1", "ios >= 8"]
            }
          },
          cssModules: {
            enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
            config: {
              namingPattern: "module", // 转换模式,取值为 global/module
              generateScopedName: "[name]__[local]___[hash:base64:5]"
            }
          }
        }
      }
    };
    
    module.exports = function(merge) {
      if (process.env.NODE_ENV === "development") {
        return merge({}, config, require("./dev"));
      }
      return merge({}, config, require("./prod"));
    };
    
    

登录后回复