In lerna project, use exclude and include is not working.
- Dominant language
- JavaScript
- Stars
- 4.8k
- Forks
- 456
- Avg merge
- 9h 19m
- Merged PRs (30d)
- 2
Description
**I'm submitting a bug report**
**Webpack Version:**
5.x
**Babel Core Version**:
7.x
**Babel Loader Version**:
8.x
**Please tell us about your environment:**
OSX 10.x /
**Current behavior:**
When I use webpack with babel-loader, i get output code with require method or not transpile es6.
**Expected/desired behavior:**
get output code with es5 and not contain require method.
* **If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.**
```JavaScript
// webpack.common.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const env = process.env;
module.exports = () => {
return {
entry: {index: './src/index.js'},
stats: 'errors-warnings',
resolve: {
alias: {
'@': path.resolve(process.cwd(), './src')
},
symlinks: false
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: './public', to: '',
globOptions: {
ignore: '.DS_Store,.gitignore,.gitkeep,.git/**,**/.git/**'.split(',')
}
}
]
}),
...[
new HtmlWebpackPlugin({
filename: './/index.html',
template: './src/templates/index.ejs',
title: undefined,
chunks: [ 'style', 'chunk-vendors', 'chunk-common', 'index' ],
env: 'production',
minify: false
})
]
],
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
},
styles: {
test: /[\\/]common[\\/].\.css$/,
name: 'style',
chunks: 'all',
enforce: true
}
}
},
minimizer: [
new TerserWebpackPlugin({
parallel: true,
extractComments: false,
terserOptions: {
ie8: false,
toplevel: true
}
})
]
},
module: {
rules: [
{
test: /\.m?js$/,
// exclude: /node_modules\/(?!(@lerna-demo\/common)\/).*/, // A. contain required
exclude: /(node_modules|bower_components)/, // B. container es6 code
include: /node_modules\/@lerna-demo.*/, // B. container es6 code
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
corejs: 3,
useBuiltIns: 'usage',
}
]
],
plugins: [
'@babel/plugin-transform-runtime',
'@babel/plugin-transform-modules-commonjs'
]
}
}
},
{
test: /\.ejs/,
loader: 'ejs-loader',
options: {
variable: 'props',
esModule: false
}
},
{
test: /\.less$/,
use: [
env.NODE_ENV !== 'production' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ''
}
},
'css-loader',
'less-loader'
]
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [ 'img:src', 'img:data-src', 'audio:src' ]
}
}
},
{
test: /\.(png|svg|jpg|gif|webp)$/,
use: [
{
loader: 'url-loader',
options: {
esModule: false,
outputPath: '/images',
limit: 10 * 1024,
name: '[name].[hash:8].[ext]'
}
}
]
}
]
},
output: {
publicPath: '',
filename: 'js/[name].[fullhash:8].js',
path: path.resolve(__dirname, '../dist')
}
};
};
```
```JavaScript
// webpack.prod.js
const {merge} = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = env => {
return merge(common(env), {
mode: 'production',
target: [ 'web', 'es5' ],
externals: {
'custom-jquery': '$'
},
// devtool: false,
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin(),
],
output: {
path: path.resolve('./dist'),
publicPath: ''
}
});
};
```
[demo in here](https://github.com/FiShelly/lerna-demo)
Contributor guide
Research direction
Start with webpack.common.js and webpack.prod.js, focusing on the JavaScript rule's exclude/include patterns and Babel loader options. Reproduce the build using the linked lerna-demo, compare the generated output with the reported behavior, and confirm completion when the relevant ES6 dependency code is transpiled to ES5 without the unwanted require method.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, webpack
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100