webpack打包组件库问题

Question

 

打包的组件库就一个js,引用会报错

ReferenceError: exports is not defined

其中webpack主要代码是

 webpackConfig.module
    .rule('js')
    .test(/\.([jt])s$/)
    .exclude.add(/node_modules/)
    .end()
    .use('babel-loader')
    .loader('babel-loader')
    .options({
      presets: [
        '@babel/preset-env',
        '@babel/preset-typescript',
        '@vue/babel-preset-jsx',
      ],
      plugins: [
        [
          '@cyber/babel-plugin-component',
          { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' },
        ],
        '@babel/plugin-transform-regenerator',
        '@babel/plugin-transform-runtime',
      ],
    });

 webpackConfig.output
    .path(resolve(cwd, 'dist'))
    .filename('[name].js')
    .libraryTarget('commonjs');

求解

 

为了排查问题,我把index.js写成

const Cyber = {}

export default Cyber

Answer 1

关于这个问题一般是由于没有按照ES6的写法，请将写法转换为ES6，并严格遵循ES6的规范。