Webpack 4，Vue 同时使用 Typescript 类和 JS 代码。

Posted 2023-02-22

【中文标题】Webpack 4，Vue 同时使用 Typescript 类和 JS 代码。

【英文标题】：Webpack 4, Vue using Typescript classes and JS code at the same time.

【发布时间】：2019-02-14 06:52:17

【问题描述】：

我正在将 JS 文件迁移到 Typescript，我的目标是能够在 Vue 中同时使用 JS 和 Typescript 类。我知道，我可以将 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 配置：

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

当我只使用ts-loader时，代码运行良好，但是编译出来的JS代码的版本是ES6而不是ES5。

【问题讨论】：

您需要切换到 Babel 7 才能使其工作。此外，不推荐使用 @babel/preset-env，因为 preset-es2015 已被弃用。我还建议让 Babel 在混合环境中进行 Typescript 编译。

Connexo，谢谢，让我试试。至少我知道这是可能的。我从一些在线示例中复制了“预设”，但它不能满足我的需要。不需要任何额外设置就可以工作吗？

【参考方案1】：

这可能对那些刚接触 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',
        'adminBack' : './resources/assets/sass/admin back/adminBack.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'
        ),
    ]
;

如果你想在单个文件中使用 SCSS Vue 组件，那么使用这个：

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

</style>