webpack 配置不能使用 ES6 导入作为相对路径

Question

我已将我的 Webpack 配置文件从 CommonJS 转换为 ES6 模块到 cjs-to-es6。像这样的一些 ES6 导入语句有效：

import config from '../config'

虽然这条线不起作用

import utils from './utils'

导致这个错误

$ babel-node ./node_modules/.bin/webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
/my/directory/build/vue-loader.conf.js:34
  loaders: _utils2.default.cssLoaders({
                           ^

TypeError: Cannot read property 'cssLoaders' of undefined
    at Object.<anonymous> (/my/directory/build/vue-loader.conf.js:19:18)
    at Module._compile (module.js:649:30)
    at loader (/Users/hanxue/.config/yarn/global/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/hanxue/.config/yarn/global/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/my/directory/build/webpack.base.conf.js:5:1)
error An unexpected error occurred: "Command failed.

解决方法

变化

import utils from './utils'

到

const utils = require('./utils')

将消除错误信息。

背景

webpack: 4.0.1 节点：v9.8.0 纱线：1.5.1

目录结构

$ ls -a config/
.       .babelrc    index.js    test.env.js
..      dev.env.js  prod.env.js
$ ls -a build/
.           check-versions.js   webpack.base.conf.js
..          logo.png        webpack.dev.conf.js
.babelrc        utils.js        webpack.prod.conf.js
build.js        vue-loader.conf.js  webpack.temp.js

build/.babelrc和config/.babelrc的内容：

{
  "presets": ["es2015"]
}

相关package.json内容

"scripts": {
    "dev": "babel-node ./node_modules/.bin/webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "build": "node build/build.js"
  },

问题

如何让import utils from './utils' 正常工作？

Answer 1

将import utils from './utils' 替换为import * as utils from './utils'。

• import something from 'module' 将 default export 导入为 something
• import * as something from 'module' 将所有内容导入为 something

它只有在 utils.js 是一个 ES6 模块（我假设）时才有效，如果它是一个 CommonJS 模块 (module.exports)，那么两者都应该工作。

在运行时，Babel CommonJS 插件会检查模块是 ES6 还是 CommonJS（使用 __esModule）和：

• 与 import default from module ：
  • 如果是 CommonJS 模块：返回module.exports
  • 如果是 ES6 模块：返回 export default（这就是为什么它不适合你）
• 与 import * as all from module ：
  • 如果是 CommonJS 模块：返回module.exports
  • 如果是 ES6 模块：返回对象中的所有命名导出