Rollup + vue3 - 插件 commonjs--resolver SyntaxError - tepmlate 中无法理解的标签样式

Question

我在 vue3 + rollup 中构建库时遇到问题。有人有什么想法吗？ 当我从 template.vue 中删除标签时，项目就会正确构建。

输出： [!]（插件 commonjs--resolver）语法错误：/shared-vue3/src/lib-components/shared/ShEntryWrapper.vue?vue&type=style&index=0&scoped=true&lang.css：意外的标记（1:0）

rollup.config

const baseConfig = {
  plugins: {
    preVue: [
      alias({
        entries: [
          {
            find: '@',
            replacement: `${path.resolve(projectRoot, 'src')}`
          }
        ]
      })
    ],
    replace: {
      'process.env.NODE_ENV': JSON.stringify('production')
    },
    vue: {
      isProduction: true,
      style: {
        isProd: true,
        preprocessLang: 'scss',
        scoped: true
      }
    },
    postVue: [
      resolve({
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
      }),
      commonjs()
    ],
    babel: {
      exclude: 'node_modules/**',
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
      babelHelpers: 'bundled'
    }
  }
};


const esConfig = {
  ...baseConfig,
  input: 'src/entry.esm.ts',
  external,
  output: {
    file: 'dist/pixel-vue-shared.esm.js',
    format: 'esm',
    exports: 'named'
  },
  plugins: [
    peerDepsExternal(),
    replace(baseConfig.plugins.replace),
    ...baseConfig.plugins.preVue,
    vue(baseConfig.plugins.vue),
    ...baseConfig.plugins.postVue,
    // Only use typescript for declarations - babel will
    // do actual js transformations
    typescript({
      typescript: ttypescript,
      useTsconfigDeclarationDir: true,
      emitDeclarationOnly: true,
      declaration: true
    }),
    babel({
      ...baseConfig.plugins.babel,
      presets: [
        [
          '@babel/preset-env',
          {
            ...babelPresetEnvConfig,
            targets: esbrowserslist
          }
        ]
      ]
    }),
    terser({
      compress: {
        unsafe: true
      },
      mangle: true,
      keep_fnames: true,
      keep_classnames: true,
      output: {
        ecma: 5
      }
    })
  ]
};

此代码适用于 vue2。

Answer 1

你找到解决办法了吗？