mina-webpack

Mina single-file-component meets Webpack

Get Started

We recommend you to get started with template-mina:

npm i -g sao

sao mina my-app
cd my-app
npm start

And see how to use with TinaJS

Packages included

• mina-loader

  

• mina-runtime-webpack-plugin

  

• mina-entry-webpack-plugin

  

Manual Installation

npm i --save-dev \
  @tinajs/mina-entry-webpack-plugin \
  @tinajs/mina-runtime-webpack-plugin \
  @tinajs/mina-loader

Simplest Usage

webpack.config.js:

const webpack = require('webpack')
const MinaEntryPlugin = require('@tinajs/mina-entry-webpack-plugin')
const MinaRuntimePlugin = require('@tinajs/mina-runtime-webpack-plugin')
const resolve = require('path').resolve

module.exports = {
  context: resolve('src'),
  entry: './app.mina',
  output: {
    path: resolve('dist'),
    filename: '[name]',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.mina$/,
        use: {
          loader: 'mina-loader',
          options: {
            loaders: {
              script: 'babel-loader',
            },
          },
        },
      },
    ],
  },
  plugins: [
    new MinaEntryPlugin({
      map: (entry) => ['es6-promise/dist/es6-promise.auto.js', entry],
    }),
    new MinaRuntimePlugin({
      runtime: './common.js',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common.js',
      minChunks: 2,
    }),
  ],
}

app.mina:

<config>
{
  "pages": [
    "page.mina"
  ]
}
</config>

<script>
require('./dependency.js')
App({
  onLaunch () {
    console.log(say({ text: 'Hello from App!' }))
  }
})
</script>

page.mina:

<config>
{
  "window":{
    "navigationBarTitleText": "Hello, World!"
  }
}
</config>

<style>
.blue {
  color: #00f;
}
</style>

<template>
  <view>
    <text class="blue">{{ msg }}</text>
  </view>
</template>

<script>
require('./dependency.js')
Page({
  onLoad () {
    this.setData({
      msg: 'Hello from Page!',
    })
  },
})
</script>

Examples

• mina-webpack - Full Example
• mina-loader - test
• TinaJS - HackerNews Reader

Related Projects

Best to use with

• TinaJS

Scaffolds

• template-mina
• ambar/new-mina

Other package compiler (also alternatives)

• gulp-mina

Got inspiration from

• Cap32/wxapp-webpack-plugin
• CantonJS/wxapp-boilerplate
• zezhipeng/mina-loader
• Vue - Single File Component