バージョン移行の背景

Taro 1.xシリーズは長期にわたり多くの開発者に利用されてきましたが、基盤アーキテクチャの制約により拡張性と保守性に課題を抱えていました。今回のメジャーバージョンアップでは、コアビルドシステムの根本的な刷新を実施しました。

新アーキテクチャの特徴

CLIツールのビルドシステムをWebpackベースに再設計しました。従来の独自実装システムから移行することで、以下のメリットを実現しています：

• プラグインアーキテクチャによる拡張性の向上
• Webpackエコシステムの活用による機能強化
• マルチプラットフォーム間のビルド設定統一
• コミュニティコントリビューションの促進

移行ガイド

ビルド設定の更新

const buildConfig = {
  appName: 'sample-app',
  sourceDir: 'src',
  buildDir: 'dist',
  designBaseWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  },
  
  babelConfig: {
    sourceMap: true,
    presets: [['env', { modules: false }]],
    plugins: [
      'transform-decorators-legacy',
      'transform-class-properties',
      'transform-object-rest-spread'
    ]
  },
  
  miniProgram: {
    webpackChain(chain) {
      // カスタムWebpack設定
    },
    cssLoader: {},
    postcss: {
      pxtransform: {
        enabled: true,
        config: {}
      },
      urlHandler: {
        enabled: true,
        config: {
          limit: 10240
        }
      }
    }
  },
  
  h5: {
    publicPath: '/',
    staticDir: 'static',
    webpackChain(chain) {
      // H5向けカスタム設定
    },
    postcss: {
      autoprefixer: {
        enabled: true,
        config: {
          browsers: [
            'last 3 versions',
            'Android >= 4.1',
            'ios >= 8'
          ]
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, buildConfig, require('./dev'))
  }
  return merge({}, buildConfig, require('./prod'))
}

非同期処理の設定変更

async/await機能のサポートが組み込み化されました。追加パッケージのインストールと設定が必要です：

// 必要なパッケージをインストール
$ npm install babel-plugin-transform-runtime --save-dev
$ npm install babel-runtime --save

Babel設定を更新：

babelConfig: {
  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'
    }]
  ]
}

新機能の活用

ビルドプロセスフック

Tapableベースのビルドプロセスにフックを追加：

class CustomBuildPlugin {
  apply(buildManager) {
    buildManager.hooks.preBuild.tap('CustomPlugin', (config) => {
      console.log('ビルド前処理', config)
    })

    buildManager.hooks.postBuild.tap('CustomPlugin', (stats) => {
      console.log('ビルド後処理', stats)
    })
  }
}

// 設定ファイルでプラグインを登録
const config = {
  plugins: [
    new CustomBuildPlugin()
  ]
}

カスタムLoaderの追加

Markdownファイルの処理例：

const config = {
  miniProgram: {
    webpackChain(chain) {
      chain.merge({
        module: {
          rule: {
            markdownLoader: {
              test: /\.md$/,
              use: [{
                loader: 'raw-loader',
                options: {}
              }]
            }
          }
        }
      })
    }
  }
}

バンドル分析プラグイン

const config = {
  miniProgram: {
    webpackChain(chain, webpack) {
      chain.plugin('bundleAnalyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
    }
  }
}

React Nativeアップグレード

React Nativeの依存バージョンを0.59.9に更新し、React 16.8.0に対応しました。これによりHooks機能が正式にサポートされます。

技術的展望

Webpack統合によるアーキテクチャ刷新は、将来の機能拡張の基盤を強化します。Tree Shakingや高度なコード分割など、現代的なフロントエンド開発手法の導入が可能になりました。