babel在vue3+webpack5+ts中的应用及出现的问题

791 阅读1分钟

webpack.config.js的配置

npm i -D @babel/preset-env @babel/preset-typescript babel-loader

 {
                test: /\.ts$/,
                use: [
                    "babel-loader",
                    // {
                    //     loader: "ts-loader",
                    //     options: { appendTsSuffixTo: [/\.vue$/] },
                    // },
                ],
},

babel.config.json的配置

{
    // 先执行插件,从前往后
    "plugins": [],
    // 预设逆序执行
    "presets": [
        [
            "@babel/preset-env",
            {
                // false 不使用任何的polyfill
                //以下的两个值可能会发生冲突(加入第三方库如果实现了关于polyfill相关的东西,你再实现 会有冲突的问题),解决:在babel-loader中加入exclude属性
                // usage 根据源代码需要哪些polyfil就引入相关的api
                // entry只要是浏览器需要的polyfill都引入(不是根据源代码应用哪些polyfill)
                "useBuiltIns": "usage",
                "corejs": "3"
            }
        ],
        "@babel/preset-typescript"
    ]
}

报错: return (_ctx: any,_cache: any) => { | ^ 26 | return (_openBlock(), _createElementBlock("div", _hoisted_1, "影音丁真鉴定,为纯纯的初生丁真" + _toDisplayString(_unref(a)), 1 /* TEXT */)) 27 | } 28 | } at instantiate (C:\Users\cty\Desktop\dz-ui\node_modules\@babel\parser\lib\index.js:64:32)

解决方案:

npm i -D babel-preset-typescript-vue3

{
    // 先执行插件,从前往后
    "plugins": [],
    // 预设逆序执行
    "presets": [
        [
            "@babel/preset-env",
            {
                // false 不使用任何的polyfill
                //以下的两个值可能会发生冲突(加入第三方库如果实现了关于polyfill相关的东西,你再实现 会有冲突的问题),解决:在babel-loader中加入exclude属性
                // usage 根据源代码需要哪些polyfil就引入相关的api
                // entry只要是浏览器需要的polyfill都引入(不是根据源代码应用哪些polyfill)
                "useBuiltIns": "usage",
                "corejs": "3"
            }
        ],
        "babel-preset-typescript-vue3",
        "@babel/preset-typescript"
    ]
}