Closed haocan closed 1 year ago
H5 + 小程序
2.0.0-alpha.0
17.0.0
dev:h5
npm
16.19.0
100.0.4896.60
window11
"@tarojs/taro": "3.4.6", windows11
nutui.jd.com/taro/react/1x/
安装Nutui后小程序能显示组件,H5不能 import { View, Text } from "@tarojs/components"; import { useLoad } from "@tarojs/taro"; import { Button } from "@nutui/nutui-react-taro";
import "./index.scss";
export default function Index() { useLoad(() => { console.log("Page loaded."); });
return ( Hello world! 点击按钮 ); }
期望的结果是H5和小程序组件库统一安装运行
H5和小程序不统一安装组件库
const config = { projectName: "taroreact", date: "2023-4-19", designWidth: 750, ..., mini: { plugins: [ "@tarojs/plugin-html", [ "import", { libraryName: "@nutui/nutui-react-taro", libraryDirectory: "dist/esm", style: true, camel2DashComponentName: false, }, "nutui-react", ], ], sass: { data: @import "@nutui/nutui-react-taro/dist/styles/variables.scss";, }, postcss: { pxtransform: { enable: true, config: {}, }, url: { enable: true, config: { limit: 1024, // 设定转换尺寸上限 }, }, cssModules: { enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true config: { namingPattern: "module", // 转换模式,取值为 global/module generateScopedName: "[name][local][hash:base64:5]", }, }, }, pxtransform: { config: { selectorBlackList: ['nut-'] } }, }, h5: { publicPath: "/", staticDirectory: "static", postcss: { autoprefixer: { enable: true, config: {}, }, cssModules: { enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true config: { namingPattern: "module", // 转换模式,取值为 global/module generateScopedName: "[name]__[local]___[hash:base64:5]", }, }, }, plugins: [ [ "import", { libraryName: "@nutui/nutui-react", libraryDirectory: "dist/esm", style: true, camel2DashComponentName: false, }, "nutui-react", ], ], sass: { data: @import "@nutui/nutui-react/dist/styles/variables.scss";, }, }, }; 因为组件库引入不统一,在小程序和H5的plugins配置里统一了组件库的引入方式,但在页面引入nutui-react并未达到预期,如果我分开引入@nutui/nutui-react-taro和@nutui/nutui-react,分开编译则会出现H5不能显示按钮,小程序则可以
@import "@nutui/nutui-react-taro/dist/styles/variables.scss";
@import "@nutui/nutui-react/dist/styles/variables.scss";
你再 taro 环境下面只需要使用 @nutui/nutui-react-taro ,taro 提供了编译到 H5 的能力,所以不需要在 taro 项目中使用 @nutui/nutui-react。
@nutui/nutui-react 只在 H5 的场景下使用。不适用于 taro 场景。
NutUI scenes(nutui 场景)
H5 + 小程序
NutUI-react version(nutui-react 版本)
2.0.0-alpha.0
React version(react 版本)
17.0.0
Operating environment(运行环境)
dev:h5
Citation method(引用方式)
npm
Node version(node 版本)
16.19.0
Browser and its version(浏览器及其版本)
100.0.4896.60
System and its version(系统及其版本)
window11
Taro environmental information(taro 环境信息)
"@tarojs/taro": "3.4.6", windows11
Reproduction link(重现链接)
nutui.jd.com/taro/react/1x/
Steps to reproduce(重现步骤)
安装Nutui后小程序能显示组件,H5不能 import { View, Text } from "@tarojs/components"; import { useLoad } from "@tarojs/taro"; import { Button } from "@nutui/nutui-react-taro";
import "./index.scss";
export default function Index() { useLoad(() => { console.log("Page loaded."); });
return (
Hello world!
);
}
What is expected?(期望的结果是什么?)
期望的结果是H5和小程序组件库统一安装运行
What is actually happening?(实际的结果是什么?)
H5和小程序不统一安装组件库
Remarks(补充说明)
const config = { projectName: "taroreact", date: "2023-4-19", designWidth: 750, ..., mini: { plugins: [ "@tarojs/plugin-html", [ "import", { libraryName: "@nutui/nutui-react-taro", libraryDirectory: "dist/esm", style: true, camel2DashComponentName: false, }, "nutui-react", ], ], sass: { data:
@import "@nutui/nutui-react-taro/dist/styles/variables.scss";
, }, postcss: { pxtransform: { enable: true, config: {}, }, url: { enable: true, config: { limit: 1024, // 设定转换尺寸上限 }, }, cssModules: { enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true config: { namingPattern: "module", // 转换模式,取值为 global/module generateScopedName: "[name][local][hash:base64:5]", }, }, }, pxtransform: { config: { selectorBlackList: ['nut-'] } }, }, h5: { publicPath: "/", staticDirectory: "static", postcss: { autoprefixer: { enable: true, config: {}, }, cssModules: { enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true config: { namingPattern: "module", // 转换模式,取值为 global/module generateScopedName: "[name]__[local]___[hash:base64:5]", }, }, }, plugins: [ [ "import", { libraryName: "@nutui/nutui-react", libraryDirectory: "dist/esm", style: true, camel2DashComponentName: false, }, "nutui-react", ], ], sass: { data:@import "@nutui/nutui-react/dist/styles/variables.scss";
, }, }, }; 因为组件库引入不统一,在小程序和H5的plugins配置里统一了组件库的引入方式,但在页面引入nutui-react并未达到预期,如果我分开引入@nutui/nutui-react-taro和@nutui/nutui-react,分开编译则会出现H5不能显示按钮,小程序则可以