使用 webpack,node 的 babel-preset-env 将 es6 模块转换为 es5
With webpack, babel-preset-env for node transpiles es6 modules to es5
当我使用 webpack 并为具有此配置的节点配置 babel-preset-env 时:
{
target: 'node',
context: __dirname,
entry: {
server: ['./src/server.js'],
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.join(__dirname, '/dist'),
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
targets: {
node: "current",
},
}],
'react'
],
},
},
}],
},
}
我的服务器使用了一些 es 模块,webpack 可以很好地检测到这些模块,例如:
[319] ./node_modules/react-router-dom/es/withRouter.js 395 bytes {0} [built]
我的问题是 es 模块 被转译成 es5 一个 包中,我做错了什么?
Webpack 3.6
babel-preset-node 1.6
您应该将 libraryTarget
添加到您的配置中:
output: {
filename: ...,
pathL ...,
libraryTarget: 'commonjs2'
},
节点现在不支持 es 模块(只有 运行 带有标志才支持)所以我认为 webpack 的输出很好。
嗯抱歉,es 模块不是用 es6 写的,而是用 es5 写的,require 被 import 代替了。因此,为了使用来自 node_modules/ 的 es6 代码,看起来我们必须改用他们的 src/ 文件夹。
当我使用 webpack 并为具有此配置的节点配置 babel-preset-env 时:
{
target: 'node',
context: __dirname,
entry: {
server: ['./src/server.js'],
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.join(__dirname, '/dist'),
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
targets: {
node: "current",
},
}],
'react'
],
},
},
}],
},
}
我的服务器使用了一些 es 模块,webpack 可以很好地检测到这些模块,例如:
[319] ./node_modules/react-router-dom/es/withRouter.js 395 bytes {0} [built]
我的问题是 es 模块 被转译成 es5 一个 包中,我做错了什么?
Webpack 3.6 babel-preset-node 1.6
您应该将 libraryTarget
添加到您的配置中:
output: {
filename: ...,
pathL ...,
libraryTarget: 'commonjs2'
},
节点现在不支持 es 模块(只有 运行 带有标志才支持)所以我认为 webpack 的输出很好。
嗯抱歉,es 模块不是用 es6 写的,而是用 es5 写的,require 被 import 代替了。因此,为了使用来自 node_modules/ 的 es6 代码,看起来我们必须改用他们的 src/ 文件夹。