ahua-taro

ahua-taro

Yara 意味着丰收，但要实现丰收，需要水。Aƕa 就像水一样，它将其核心组件的点滴汇聚成强大的客户体验流。它流淌在产品的界面上，使其生动起来。

使用

CSS-in-js

ahua-taro 是基于 linaria 的样式方案，所以需要进行相关配置：

安装依赖

yarn add @linaria/babel-preset @linaria/webpack-loader

修改配置

// config/index.js
const config = {
...
      webpackChain: (chain, webpack) => {
+      // linaria/loader 选项详见 https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#webpack
+      chain.module
+        .rule('script')
+        .use('linariaLoader')
+        .loader('@linaria/webpack-loader')
+        .options({
+          sourceMap: process.env.NODE_ENV !== 'production',
+        });
+      chain.module // fixes https://github.com/graphql/graphql-js/issues/1272
+        .rule('mjs$')
+        .test(/\.mjs$/)
+        .include.add(/node_modules/)
+        .end()
+        .type('javascript/auto');
+      chain.merge({
+        module: {
+          rule: {
+            pageLoader: {
+              test: /pages\/.+index\.tsx$/,
+              use: [
+                {
+                  loader: path.resolve(
+                    __dirname,
+                    '../node_modules/ahua-taro/dist/page-loader',
+                  ),
+                  options: {},
+                },
+              ],
+            },
+            polyfillLoader: {
+              test: /tsx?$/,
+              use: [
+                {
+                  loader: path.resolve(
+                    __dirname,
+                    '../node_modules/ahua-taro/dist/polyfill-loader.js',
+                  ),
+                  options: {},
+                },
+              ],
+            },
+          },
+        },
+      });
...
}

根目录添加 linaria.config.js 文件

// linaria.config.js
// linaria 配置详见 https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#options
module.exports = {
  rules: [
    {
      action: require("@linaria/shaker").default,
    },
    {
      test: /node_modules[/\\](?!@tarojs)/,
      action: "ignore",
    },
    {
      test: /(?!.*\/ahua-taro\/dist\/page-loader\.js).*ahua-taro\/dist\/.*\.js$/,
      action: "ignore",
    },
    {
      test: /icon-set/,
      action: "ignore",
    },
  ],
};

开发

# 安装依赖
yarn install

# 编译
yarn build

# 热编译
yarn build:watch

# 本地发布
yalc publish

# 其他项目安装本地发布的包
yalc add ahua-taro

# 修改版本号
yarn version

# 发布到npm
npm publish