关于vue报错，exports is not defined

Question

今天写完代码打包突然出现问题
浏览器报错：Uncaught ReferenceError: exports is not defined
编译器报错：

warning in ./src/main.js
"export 'default' (imported as 'filters') was not found in './filters'

今天修改一天代码，印象中并没有更改filters的操作，而且main.js也没有动，之前还在边运行边调试，打包完突然就不是好用报错了，查看了好几遍路径文件路径和单词拼写都是正确的

文件目录如下图：

filters/index.js代码

exports.statusName = (value, type) => {
    if (type === 0 && value === 0) {
        return '否'
    }
    if (type === 0 && value === 1) {
        return '是'
    }
    if (type === 1 && value === 0) {
        return '无'
    }
    if (type === 1 && value === 1) {
        return '有'
    }
    if (type === 2 && value === 0) {
        return '收费类岗位需求'
    }
    if (type === 2 && value === 1) {
        return '非收费类岗位需求'
    }
}

main.js代码

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import iView from 'iview';
import filters from './filters';
import 'iview/dist/styles/iview.css';
import '@/my-theme/index.less';
import '@/assets/css/iconfont.css';
import '@/assets/css/common.less';

Vue.config.productionTip = false;
Vue.use(iView);

Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount("#app");

实在找的心态崩了，还请各位大神指点一下为啥突然就报错了，非常感谢

Answer 1

网上查了下资料，原来自己是对CommonJS和ES6两种规范没搞明白

可以有两种方式，第一种使用CommonJS:
main.js，需要修改，将

import filters from './filters';

改成

var filters = require('./filters/index')

第二种，遵守ES6规范
filters/index.js需要修改，代码如下

let transitionstate = (value, type) => {
    if (type === 0 && value === 0) {
        return '否'
    }
    if (type === 0 && value === 1) {
        return '是'
    }
    if (type === 1 && value === 0) {
        return '无'
    }
    if (type === 1 && value === 1) {
        return '有'
    }
    if (type === 2 && value === 0) {
        return '收费类岗位需求'
    }
    if (type === 2 && value === 1) {
        return '非收费类岗位需求'
    }
}
export {
    transitionstate
}

在main.js中引用如下：

import * as filters from './filters/index';

Answer 2

filters/index.js代码改一下

export default (value, type) => {
    if (type === 0 && value === 0) {
        return '否'
    }
    if (type === 0 && value === 1) {
        return '是'
    }
    if (type === 1 && value === 0) {
        return '无'
    }
    if (type === 1 && value === 1) {
        return '有'
    }
    if (type === 2 && value === 0) {
        return '收费类岗位需求'
    }
    if (type === 2 && value === 1) {
        return '非收费类岗位需求'
    }
}