第一天学习taro

weishaoqiang
906 阅读2分钟

前言

平时看东西太容易忘记了，于是自己决定将每天看的新东西记录下来，就当增强一下记忆了

taro的第一印象

使用react的语法。类似微信小程序的标签在写项目，小程序现在经常写，很熟悉，但是react没有在实际项目中使用过，看起来还是有点生疏，这个需要多加练习并在项目中尽快熟它。

taro的安装和项目初始化

使用npm全局安装taro的脚手架

npm install -g @tarojs/cli

taro安装好后找个目录，初始化taro项目

taro init [projectNane]:myApp
如果安装的太慢，可以配置npm源
1.临时使用
npm --registry https://registry.npm.taobao.org install express
2.持久使用
npm config set registry https://registry.npm.taobao.org

taro init按照提示选择一些默认配置之后就初始化成功一个taro项目了

taro开启h5项目之后遇到的第一个难题

我在配置中开启taro的cssModule功能后，他并没有老老实实给我编译成功，我通过在.jsx文件中引用样式报了错

// 按照官方文档的说法，开启cssModule后，需要cssModule打包的样式文件名需要带.module
在config目录下的index.js设置以下代码：
 h5: {
    postcss： {
        cssModules: {
            enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
            config: {
              namingPattern: 'global', // 转换模式，取值为 global/module
              generateScopedName: '[name]__[local]___[hash:base64:5]'
            }
        }   
    }
 }
在index.jsx中的写法：
import style from './index.module.sass'

<View className={style.name}></View>
// 这样引入之后编译报错了如下：
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'localIdentName'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }

关于上面这个问题我还没找到正的愿意原因，到底哪里少了什么配置，但是通过其他方式可以解决这个问题，我的解决的方案如下。

我不是用默认配置中的cssmodule,它官方文档实在postcss里面配置并开启的，我直接将这个里面的配置关换掉，
并在它提供的cssLoaderOption中进行cssModule的配置，这样就解决了开启cssModule报错的问题。

cssLoaderOption: {
    modules: {
        mode: 'local',
        localIdentName: '[local]__[hash:base64:5]'
    },
    import: true,
    importLoaders: true,
}

各位taro高级玩家如果看到这篇文章，知道关于这个cssModule开启后报错的原因，烦请在评论区给小弟留言，非常感谢

上述的问题知道怎么回事了，我在安装taro的时候默认给我装了2.2.3版本的脚手架，原因是因为taro2.2.3版本（经查证更高的beta版本存在相关问题）这个cssModule有问题，应该是css-loader的配置不对。解决方案如下:

把@tarojs/cli和taro的版本回滚到2.1.5的稳定版本，重新安装依赖，问题即可解决。
avatar
文章
阅读
粉丝