我无法理解为什么这不起作用。也许我在看医生时太草率了。在我的webpack项目中,我无法通过babel将ES6 node_module(ol aka openlayers)转换为es5。我正在使用
babel.config.js
正如babel在这个案例中所建议的那样。
运行后
webpack build
这个
main.js
bundle仍然具有类似箭头函数的ES6代码
const
和
let
。
如何转换
ol
通过babel 7封装到es5?
//babel.config.js
const path = require('path')
module.exports = {
presets: [
'@babel/preset-react',
[
'@babel/preset-env',
{
targets: {
browsers: 'IE 11, not dead'
},
useBuiltIns: 'entry',
corejs: {
version: '3',
proposals: true
}
}
]
],
plugins: [
'@babel/plugin-transform-runtime',
'@babel/plugin-transform-modules-commonjs',
['styled-components', { ssr: true }]
],
exclude: [
/\bcore-js\b/,
/\bwebpack\/buildin\b/,
/\node_modules\/(?!(ol)\/).*/
]
}
//webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
entry: ['./src/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
publicPath: ''
},
target: 'web',
devtool: 'source-map',
module: {
rules: [
{
test: /(?!node_modules).*\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader?cacheDirectory=false',
options: {
babelrc: false
}
}
]
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][contenthash].[ext]',
publicPath: '../'
}
}
]
},
{
test: /\.(otf)$/,
use: {
loader: 'url-loader'
}
},
{
test: /\.(eot|woff|woff2|ttf|svg)(\?[\s\S]+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][contenthash].[ext]',
publicPath: '../'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/template.html'
}),
new CompressionPlugin()
]
}