reactjs - 如何在 webpack 中禁用“严格”模式?
问题描述
我很抱歉这个菜鸟问题,但它让我发疯。我买了一个 react 组件包,并附带了这个复杂的 webpack 配置,实际上直到我解决了一些严格的语法规则,如空格、逗号、单引号等,才让我编译......
这是我的大型 webpack.config.dev.js 文件:
module.exports = {
mode: 'development',
devtool: 'cheap-module-source-map',
entry: [
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
],
output: {
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
optimization: {
splitChunks: {
chunks: 'all',
name: false,
},
runtimeChunk: true,
},
resolve: {
modules: ['node_modules'].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web',
},
plugins: [
PnpWebpackPlugin,
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
{ parser: { requireEnsure: false } },
{
test: /\.(js|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
},
{
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
},
},
},
],
],
cacheDirectory: true,
cacheCompression: false,
},
},
{
test: /\.js$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: false,
sourceMaps: false,
},
},
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
}),
},
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
},
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
{
exclude: [/\.(js|jsx)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
new ModuleNotFoundPlugin(paths.appPath),
new webpack.DefinePlugin(env.stringified),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
}),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
performance: false,
};
对于初学者,我认为这个文件不是问题吗?我想用正常的语法和没有严格的 babel 规则来编译我的项目(其中一些是无用的,比如最后一个对象参数后面的逗号)。
请任何帮助将不胜感激!
解决方案
首先,永远不要购买免费的东西(如果你购买的是教程,那就不同了,但是如果你不明白你在看什么,购买代码不会帮助你学习)。有大量免费工具、设置、教程和指南可以满足您的开发需求。例如,create-react-app是免费的,受到高度支持,并且是对新手开发人员非常友好的样板。
无论如何,你看到的是ESlint
错误。ESlint是标准化代码的好工具。它迫使开发人员编写代码以一种特定的方式来很好地跨项目集成(防止混合语法规则和样式)。因此,我不建议禁用它,相反,您应该相应地修复错误。
要解决您的一些错误:
所有这些错误都是可以轻松修复的简单错误。
推荐阅读
- flutter - listview onTap 动画所有按钮问题:Flutter
- c# - 在 .Net Core (c#) 应用程序中设置外部依赖项
- django - 迁移后django静态文件404错误
- vue.js - 了解 NUXT 中的上下文和应用程序方法
- python - 在行级别向熊猫数据框添加列表元素
- laravel - 在 laravel 分页和 firebase-jwt-token 中发送 Token 和页面
- python - PythonAnywhere cx_Oracle DPI-1047:找不到 64 位 Oracle 客户端库:“libclntsh.so:
- django - Django为什么只有基于字符串的字段不能有null = true?
- python - 如何在 selenium python 中更改集成测试的优先级
- c++ - OpenCv 预装在 google Colab 中,但我想从 opencv_contrib 添加一个额外的模块。如何做到这一点?