vue jsx webpack flow config

vue-jsx-flow-webpack.md

依赖安装

yarn add -D \
babel-plugin-syntax-flow \
babel-plugin-transform-class-properties \
babel-plugin-transform-flow-strip-types \
babel-plugin-transform-es3-member-expression-literals \
babel-plugin-transform-es3-property-literals \
babel-plugin-transform-object-assign\
babel-plugin-transform-object-rest-spread \
babel-plugin-transform-runtime \
babel-plugin-transform-vue-jsx \
babel-preset-env \
vue-jsx-hot-loader

配置webpack

const getBabelCommonConfig = require('./getBabelCommonConfig.min.js');
const babelConfig = getBabelCommonConfig(false);


    module: {
        rules: [
          ...
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
                // options: babelConfig
            },
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'vue-jsx-hot-loader'
                    },
                    {
                        loader: 'babel-loader',
                        options: babelConfig
                    }
                ],
                
            },
          
        ]
    },

    resolve: {
        ...
        extensions: ['.js', '.jsx', '.vue', '.json', '.css', '.node']
    }
};

配置bebel-loader

//getBabelCommonConfig.js
module.exports = function(modules) {
    const plugins = [
        require.resolve('babel-plugin-transform-flow-strip-types'),
        require.resolve('babel-plugin-syntax-flow'),
        require.resolve('babel-plugin-transform-vue-jsx'),
        require.resolve(
            'babel-plugin-transform-es3-member-expression-literals'
        ),
        require.resolve('babel-plugin-transform-es3-property-literals'),
        require.resolve('babel-plugin-transform-object-assign'),
        require.resolve('babel-plugin-transform-object-rest-spread'),
        require.resolve('babel-plugin-transform-class-properties')
    ];
    plugins.push([
        require.resolve('babel-plugin-transform-runtime'),
        {
            polyfill: false
        }
    ]);
    return {
        presets: [
            [
                require.resolve('babel-preset-env'),
                {
                    modules,
                    targets: {
                        browsers: [
                            'last 2 versions',
                            'Firefox ESR',
                            '> 1%',
                            'ie >= 9',
                            'iOS >= 8',
                            'Android >= 4'
                        ]
                    }
                }
            ]
        ],
        plugins,
        env: {
            test: {
                plugins: [require.resolve('babel-plugin-istanbul')]
            }
        }
    };
};

.babelrc

{
    "env": {
        "test": {
            "presets": [["env", {"targets": {"node": "current"}}]],
            "plugins": [
                "syntax-flow",
                "transform-flow-strip-types",
                "transform-vue-jsx",
                "transform-object-assign",
                "transform-object-rest-spread",
                "transform-class-properties",
                "transform-runtime"
            ]
        }
    }
}