Webpack 4, Vue с использованием классов Typescript и кода JS одновременно. - PullRequest
Новая
       15

Webpack 4, Vue с использованием классов Typescript и кода JS одновременно.

0 голосов
/ 09 сентября 2018

Я мигрирую файлы JS в Typescript, и моя цель состоит в том, чтобы иметь возможность использовать классы JS и Typescript в Vue. Я знаю, что могу конвертировать сценарии Vue в Typescript, но сейчас я не хочу этого делать.

Проблема возникает в component.vue файле: 

this.exceptionHandler = app.resolve('ExceptionHandler');

Я получаю сообщение об ошибке в консоли браузера (компиляция в порядке): 

"TypeError: Cannot call a class as a function"

ExceptionHandler определен в файле TypeScript .ts .

Вопрос заключается в следующем: возможно ли сначала перенести код TS в JS ES6, затем собрать код вместе, а затем запустить Babel для всего, чтобы скомпилировать его в ES5?

Я использую эти опции в конфигурации TS: 

"lib": ["es7", "es6", "es5", "dom"],
"types": ["reflect-metadata"],
"module": "commonjs",
"target": "es6",

И Webpack 4 config: 

        {
            test: /\.ts(x?)$/,
            loader: 'babel-loader?presets[]=es2015!ts-loader',
            exclude: [
                "node_modules",
                "vendor",
                "app",
                "public"
            ]
        },

Когда я использую только ts-loader , код работает хорошо, но версия скомпилированного кода JS - ES6, а не ES5.

1 Ответ

0 голосов
/ 29 сентября 2018

Это может быть полезно для тех, кто плохо знаком с Webapack 4. Мой рабочий файл конфигурации webpack выглядит следующим образом: 

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");


let devMode = process.env.NODE_ENV === 'development';

let webUrl = 'http://my-project.localhost/';
if (process.env.NODE_ENV === 'production') {
    webUrl = 'https://my-project.com/';
}
else if (process.env.NODE_ENV === 'development') {
    webUrl = 'http://my-project.localhost/';
}

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {
        'frontApps': './resources/assets/js/frontApps.ts',
        'backAppsAdmin': './resources/assets/js/backAppsAdmin.ts',
        'styles' : './resources/assets/sass/styles.scss',
        'admin-back' : './resources/assets/sass/admin back/admin-back.scss',
    },
    module: {
        rules: [

            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: [{
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }]
            },

            {
                test: /\.vue$/,
                loader: 'vue-loader',

                options: {
                    loaders: {
                        js: 'babel-loader',


                        css: ExtractTextPlugin.extract({
                            use: [
                                {
                                    loader: 'css-loader',
                                    options : {
                                        url: false
                                    }
                                }
                            ],
                            fallback: 'vue-style-loader',

                        }),
                    }
                }
            },

            {
                test: /\.ts(x?)$/,
                loader: 'babel-loader?presets[]=@babel/preset-env!ts-loader',
                exclude: [
                    "node_modules",
                    "vendor",
                    "app",
                    "public"
                ]
            },

            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options : {
                            url : false,
                            sourceMap: devMode
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options : {
                            processCssUrls : false,
                            sourceMap: devMode
                        }
                    }
                ],
            }


        ]
    },
    output : {
      filename : 'js/[name].js',
      chunkFilename: 'js/[name].js',
      path: path.resolve(__dirname, 'public'),
      publicPath: webUrl,
    },

    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor : {
                    test : '/node_modules/',
                    chunks: 'all',
                    name: 'vendor',
                    priority: 10,
                    enforce: true
                }
            }
        },
    },

    resolve: {
        extensions: [ '.tsx', '.ts', '.js', '.vue' ],
        alias: {
            vue: 'vue/dist/vue.esm.js'
        }
    },

    plugins: [
        new VueLoaderPlugin(),

        new MiniCssExtractPlugin({
            filename: "css/[name].css",
            chunkFilename: "css/[id].css"
        }),

        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),

        new webpack.ProvidePlugin({
            'regeneratorRuntime': 'regenerator-runtime/runtime'
        }),
    ]
};

Если вы хотите использовать SASS внутри одного компонента Vue, используйте следующее: 

<style lang="scss" type="text/scss"  scoped>

</style>
...