[英]webpack config cannot use ES6 import for relative path
I have converted my Webpack configuration files from CommonJS to ES6 Modules to cjs-to-es6 . 我已经将我的Webpack配置文件从CommonJS转换为ES6模块,再转换为cjs-to-es6 。 Some of the ES6 import statements such as this works:
诸如此类的一些ES6导入语句:
import config from '../config'
Whilst this line does not work 虽然这条线不起作用
import utils from './utils'
Resulting in this error 导致此错误
$ 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.
Changing 改变中
import utils from './utils'
to 至
const utils = require('./utils')
will eliminate the error message. 将消除错误消息。
webpack: 4.0.1 node: v9.8.0 yarn: 1.5.1 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
Content of build/.babelrc
and config/.babelrc
: build/.babelrc
和config/.babelrc
:
{
"presets": ["es2015"]
}
Relevant package.json
content 相关的
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"
},
How can I make import utils from './utils'
work correctly? 如何使
import utils from './utils'
正常工作?
Replace import utils from './utils'
to import * as utils from './utils'
. 将
import utils from './utils'
替换import utils from './utils'
中的import * as utils from './utils'
。
import something from 'module'
imports the default
export
as something
import something from 'module'
导入default
export
的something
import * as something from 'module'
imports everything as something
import * as something from 'module'
something
导入所有东西作为something
It only works if utils.js
is an ES6 module (which I assume), if it's a CommonJS module ( module.exports
) then both should work. 仅当
utils.js
是ES6模块(我假设是)时才有效,如果它是CommonJS模块( module.exports
),则两者都应该起作用。
At runtime the Babel CommonJS plugin will check if the module is ES6 or CommonJS (using __esModule
) and : 在运行时,Babel CommonJS插件将检查模块是ES6还是CommonJS(使用
__esModule
),并:
import default from module
: import default from module
:
module.exports
module.exports
export default
(this is why it doesn't work for you) export default
(这就是为什么它对您不起作用的原因) import * as all from module
: import * as all from module
:
module.exports
module.exports
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.