rstack-examples
rstack-examples copied to clipboard
vue2使用jsx然后用swc去编译会报错
"vue-loader": "^15.11.0", "vue": "^2.6.11", "@rspack/cli": "^0.7.5", "@rspack/core": "^0.7.5",
module.exports = {
...
module: {
rules: [
{
test: /\.vue$/,
include: [SPA_PATH, path.resolve(__dirname, '../node_modules/element-ui')],
use: {
loader: 'vue-loader',
options: {
compilerOptions: { preserveWhitespace: false },
experimentalInlineMatchResource: true,
}
},
},
{
test: [/\.jsx$/],
exclude: /(node_modules)/,
use: {
loader: 'builtin:swc-loader', // builtin:swc-loader swc-loader都可以
options: {
parseMap: true,
sourceMap: true,
jsc: {
parser: {
decorators: true,
dynamicImport: true,
syntax: "ecmascript",
jsx: true,
},
target: "es5",
experimental: {
plugins: [
'swc-plugin-vue-jsx', {},
'@swc/plugin-remove-console', // need to use specific version to be compatible with rspack's internal swc version
{
exclude: ['error'],
},
]
},
externalHelpers: true,
preserveAllComments: false,
loose: true,
transform: {
legacyDecorator: true,
decoratorMetadata: true,
react: {
runtime: 'automatic',
throwIfNamespace: true,
useBuiltins: false,
},
},
},
},
},
type: 'javascript/auto',
},
{
test: /\.js$/,
exclude: file => (
/node_modules/.test(file) &&
!/\.vue\.js/.test(file)
),
use: {
loader: 'builtin:swc-loader',
// options: {
// sourceMap: true,
// jsc: {
// parser: {
// syntax: "ecmascript",
// jsx: true,
// },
// // experimental: {
// // plugins: ['@vue/babel-plugin-jsx']
// // },
// transform: {
// react: {
// // 默认是React.createElement,这样会报错ReferenceError: h is not defined,两种解决方法:
// // 1.core/index.js中引入h方法挂载到window但是会影响全局组件的注册,如:MainBars找不到;
// // 2.DefinePlugin先定义一个变量'Vue_CreacteElement': 'h',然后配置 `transform.react.pragma = 'Vue_CreacteElement'`
// pragma: 'h',
// },
// },
// },
// },
},
type: 'javascript/auto',
},
]
}
}
.js如果用babel-loader就没问题