标签：node exports vue cli3 babel modules commonJS module

原文链接：http://www.pianshen.com/article/9677274805/

第一种原因就是import和module.exports的混用要知道commonJS和ES6的语法是不太一样的前者是require和module.exports后者则是import和exports,当你混用这两个语法的时候，webpack就会报错，也就是第一种情况。为了使编译好的程序能在大多数浏览器下运行。
webpack里面有一个编译器叫Babel，负责把ES6的语言转化为commonJS以兼容绝大多数浏览器。当你混用这两个语法的时候你可以使用babel的commonJS模式帮你把import编译成require。
  然而第二种情况就是你要使用@babel/plugin-transform-runtime这个插件的时候，同时你又在某个commonJS写的文件里使用这个插件时，babel会默认你这个文件是ES6的文件，然后就使用import导入了这个插件，从而产生了和第一种情况一样的混用错误。解决方法是在babel.config.js里配置unambiguous设置，让babel和webpack一样严格区分commonJS文件和ES6文件

解决方法：

module.exports = {
  presets: [
    '@vue/app'
  ],
  sourceType:'unambiguous'
}

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

以vxe-table 兼容ie9的部分配置

1.安装依赖

npm install -D babel-loader @babel/core @babel/preset-env webpack

2.配置vue.config.js

module.exports = {
  // ...  
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.m?js$/,
          // exclude用上面配置的话，默认是过滤不编译node_modules 路径下的文件
          // exclude: /(node_modules|bower_components)/,
          // include 指定需要编译的路径
          include: [
            resolve('src'),
            resolve('node_modules/xe-utils'),
            resolve('node_modules/vxe-table'),
            // resolve('node_modules/vxe-table-plugin-iview'),
          ],
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  },
  // ...
}

2.修改babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  sourceType:'unambiguous'
}

3.Chrome 及 ie9 展示效果

标签：node,exports,vue,cli3,babel,modules,commonJS,module
来源： https://www.cnblogs.com/ysxq/p/11611543.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。