Webpack、ES6 export/import & Vue.js

Question

我正在将 vue.js 应用程序的构建过程从 gulp/browserify/vueify 转移到带有 vue-loader 的 webpack。

如果我的 .babelrc 中有 modules: false，我会在页面加载时收到错误消息：未捕获的类型错误：无法分配给对象属性 'exports' 的只读

如果我删除 modules: false，我得到的错误与 Vue.use is not a function 类似。这可以通过更改我从以下位置导入库的方式来解决：

var Vue = require('vue');

至

var Vue = require('vue').default;

`webpack.conf.js`

var path = require('path');
var vueLoaderConfig = require('./vue-loader.conf.js');

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist/js'),
    filename: '[name].js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  },
  module: {
    rules: [{
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      include: [resolve('src'), resolve('test')],
      options: {
        formatter: require('eslint-friendly-formatter')
      }
    }, {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: vueLoaderConfig
    }, {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src'), resolve('test')]
    }, {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: path.posix.join('./dist/img', 'img/[name].[hash:7].[ext]')
      }
    }]
  }
}

所以我的问题是：

我是否必须提前知道图书馆是否使用 import/export default 或 require/module.exports？还是 webpack 会处理这个问题，我假设我可以全面使用 import/export 而不是 require/module.exports？

Answer 1

您可以使用 ES6 和 import/export 编写所有代码。不用担心库中的代码。

Webpack、ES6 export/import & Vue.js

Webpack, ES6 export/import & Vue.js

webpack

vue.js

es6-modules

vuejs2

`webpack.conf.js`

所以我的问题是：