• webpack解析ol依赖的时候报错

    关注 码龄 粉丝数 原力等级 -- 被采纳 被点赞 采纳率 还有14分钟九点半 2024-04-17 11:01 采纳率: 0% 浏览 11 首页/ 前端 / webpack解析ol依赖的时候报错 vue.jsjavascriptwebpack 自己配的webpack 下载ol之后解析报错，应该如何解决in ./node_modules/ol/structs/LRUCache.js Module parse failed: Unexpected token (229:30) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | */ | peek(key) { > return this.entries_[key]?.value_; | } | webpack配置如下 const path = require("path"); // 导入compression-webpack-plugin const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 定义压缩文件类型 const productionGzipExtensions = ["js", "css"]; const webpack = require("webpack"); function resolve(dir) { return path.join(__dirname, dir); } console.log(process.env.VUE_APP_SERVER_API); module.exports = { publicPath: "/", // 根路径 // 输出文件路径，默认为dist // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 //assetsDir: 'static', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径 // indexPath: '', // 保存时 lint 代码 lintOnSave: process.env.NODE_ENV === "development", // 生产环境是否生成 sourceMap 文件 productionSourceMap: false, chainWebpack: (config) => { // 忽略的打包文件 config.externals({ axios: "axios", }); const entry = config.entry("app"); entry.add("babel-polyfill").end(); entry.add("classlist-polyfill").end(); }, css: { // 忽略 CSS order 顺序警告 extract: { ignoreOrder: true }, loaderOptions: { // 给 sass-loader 传递选项 sass: { //引用全局css文件 data: `@import "@/styles/var.scss";`, }, }, }, configureWebpack: (config) => { config.resolve.alias["@"] = resolve("src"); config.performance = { hints: "warning", //入口起点的最大体积 整数类型（以字节为单位） maxEntrypointSize: 50000000, //生成文件的最大体积 整数类型（以字节为单位 300k） maxAssetSize: 30000000, //只给出 js 文件的性能提示 assetFilter: function(assetFilename) { return assetFilename.endsWith(".js"); }, }; config.plugins.push( new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "windows.jQuery": "jquery", }) ); if (process.env.NODE_ENV === "production") { // 生产环境 // 编译时删除console.log config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true; // 配置productionGzip-高级的方式 // 配置参数详解 // asset： 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。 // algorithm： 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。 // test： 所有匹配该正则的资源都会被处理。默认值是全部资源。 // threshold： 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。 // minRatio： 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。 config.plugins.push( new CompressionWebpackPlugin({ filename: "[path].gz[query]", algorithm: "gzip", test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), threshold: 10240, minRatio: 0.8, deleteOriginalAssets: true, // 删除原文件 }) ); } else { // 开发环境 } }, chainWebpack(config) { config.plugins.delete("preload"); // TODO: need test config.plugins.delete("prefetch"); // TODO: need test // set svg-sprite-loader config.module.rule("svg").exclude.add(resolve("src/icons")).end(); config.module .rule("icons") .test(/\.svg$/) .include.add(resolve("src/icons")) .end() .use("svg-sprite-loader") .loader("svg-sprite-loader") .options({ symbolId: "icon-[name]", }) .end(); // set preserveWhitespace config.module .rule("vue") .use("vue-loader") .loader("vue-loader") .tap((options) => { options.compilerOptions.preserveWhitespace = true; return options; }) .end(); // https://webpack.js.org/configuration/devtool/#development config.when(process.env.NODE_ENV === "development", (config) => config.devtool("cheap-source-map") ); }, devServer: { disableHostCheck: true, port: 8090, // 配置端口 open: false, // 自动开启浏览器 compress: true, // 开启压缩 overlay: { warnings: false, errors: true, }, // 设置请求代理 proxy: { "/": { target: process.env.VUE_APP_SERVER_API, ws: false, // 需要websocket 开启 pathRewrite: { "^/": "/", }, }, }, }, }; 展开全部 收起 写回答 好问题 0 提建议 追加酬金 关注问题 微信扫一扫 点击复制链接 分享 邀请回答 编辑 收藏 删除 结题 收藏 举报 追加酬金 (90%的用户在追加酬金后获得了解决方案) 当前问题酬金 ¥ 0 (可追加 ¥500） ¥ 15¥ 20¥ 50¥ 100¥ 200 支付方式 扫码支付 二维码出错 点击刷新 支付金额 15 元 提供问题酬金的用户不参与问题酬金结算和分配 支付即为同意 《付费问题酬金结算规则》 结题 再想想 删除 再等等

    5条回答 默认 最新

    • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-17 11:01
      关注

      引自免费微信小程序：皆我百晓生

      根据您提供的信息，错误发生在./node_modules/ol/structs/LRUCache.js文件中，这通常是因为Webpack没有正确地处理某些模块，可能是由于ES6语法未被转换为浏览器兼容的ES5版本。

      为了修复这个问题，你需要确保你的项目中有一个Babel loader来编译这些模块。目前看来，你的配置文件中并没有明确设置Babel loader。你需要在Webpack配置中添加一个Babel预处理器，以便将Node_module中的现代JavaScript代码转换为浏览器可以理解的格式。

      首先，确保你已经安装了@babel/core, @babel/preset-env, 和 @babel/cli 这些包。如果没有，可以通过运行以下命令进行安装：

      npm install --save-dev @babel/core @babel/preset-env @babel/cli

      接下来，在你的项目根目录创建一个.babelrc文件，并添加以下内容：

      {
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "modules": false
      }
    ]
  ]
}

      然后，你需要在chainWebpack函数中添加Babel loader到规则中，这样Webpack才能正确处理.js文件。修改chainWebpack部分如下：

      chainWebpack: (config) => {
  // ...其他配置...

  // 添加Babel加载器
  config.module
    .rule('babel')
    .test /\.m?js$/i // 匹配所有.js和.mjs文件
    .use('babel-loader')
    .loader('babel-loader')
    .options({
      presets: ['@babel/preset-env'],
    });

  // ...其他配置...
}

      最后，确保在项目的package.json中，对开发脚本进行更新，使其使用Babel运行：

      "scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build --mode production && npm run optimize",
  "optimize": "npx optimize-css-assets && npx terser -c -m -o dist/bundle.min.js dist/bundle.js"
},

      这里我们假设你已经安装了optimize-css-assets和terser这两个优化工具。如果没有，可以使用npm install --save-dev optimize-css-assets terser命令安装。

      现在，重新运行npm run serve或npm run build应该能成功编译并运行项目。如果还有其他问题，可能需要检查其他依赖项是否有类似的问题，或者查看Webpack配置中是否有遗漏的部分。

      展开全部

      评论 编辑记录
      还有14分钟九点半 2024-04-17 11:35

      我按照你操作了一遍sass报错了

       ./src/styles/common.scss

Syntax Error: TypeError: Cannot assign to read only property 'exports' of object '#'


 @ ./src/main.js 40:0-30
 @ multi (webpack)-dev-server/client?http://192.168.0.6:8099/sockjs-node (webpack)/hot/dev-server.js ./src/main.js



      
 
       赞
       
      
          回复
        
        
       
       
          
      •    
        Kwan的解忧杂货铺 Java领域优质创作者 2024-04-17 11:02
         关注
          
        上午好☀️☀️☀️️
        本答案参考ChatGPT-3.5
        

        根据您的问题描述，问题原因是在使用Webpack解析ol依赖文件时，报错提示需要配置合适的loader处理该文件类型。
        

        解决方案如下：
        

        1. 

          确认项目中是否已经安装了处理JavaScript文件的loader，例如babel-loader。
          

        2. 

          在webpack配置文件中添加对JavaScript文件的处理配置。可以在module.rules中添加如下配置：
          

        

        module: {
  rules: [
    // ...其它规则
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

        

        1. 

          如果已经安装了babel-loader但仍然报错，可能是由于相关babel配置不正确。请确认项目根目录下是否有.babelrc或babel.config.js等babel配置文件，并确保配置文件中包含了需要的插件和预设，例如处理ES6语法的@babel/preset-env。
          

        2. 

          如果安装了以上loader和配置仍然无效，可以尝试升级webpack和相关loader的版本，以确保使用了最新版本的解析器。
          

        

        注意：以上是一般性的解决方案，具体问题需要根据实际情况进行调查和处理。如果能提供更多相关的配置文件和错误信息，可以更准确地定位问题并提供解决方案。
        

         
         
         
         
          
         
         
         
           
         评论
                   
         
         
          
      •    
        码农阿豪 Java领域优质创作者 2024-04-17 11:02
         关注
          
        让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言
        这个报错是因为在Webpack中没有处理ol库中的LRUCache.js文件的加载器，需要手动配置使用babel-loader处理这个文件。具体的处理方式如下：

        1. 安装babel-loader和相关babel依赖
        

        npm install --save-dev babel-loader @babel/core @babel/preset-env

        

        1. 在Webpack配置文件中添加如下规则：
        

        module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"]
        }
      }
    }
  ]
}

        

        这个规则表示对所有的.js文件使用babel-loader加载器，并使用@babel/preset-env预设来处理ES6语法。 附上完整的Webpack配置文件示例：
        

        const path = require("path");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const webpack = require("webpack");
function resolve(dir) {
  return path.join(__dirname, dir);
}
console.log(process.env.VUE_APP_SERVER_API);
module.exports = {
  publicPath: "/",
  outputDir: "dist",
  assetsDir: "static",
  indexPath: "index.html",
  lintOnSave: process.env.NODE_ENV === "development",
  productionSourceMap: false,
  chainWebpack: (config) => {
    config.externals({
      axios: "axios",
    });
    const entry = config.entry("app");
    entry.add("babel-polyfill").end();
    entry.add("classlist-polyfill").end();
    config.module
      .rule("js")
      .test(/\.js$/)
      .exclude(/node_modules/)
      .use("babel-loader")
      .loader("babel-loader")
      .options({
        presets: ["@babel/preset-env"],
      });
  },
  css: {
    extract: { ignoreOrder: true },
    loaderOptions: {
      sass: {
        data: `@import "@/styles/var.scss";`,
      },
    },
  },
  configureWebpack: (config) => {
    config.resolve.alias["@"] = resolve("src");
    config.performance = {
      hints: "warning",
      maxEntrypointSize: 50000000,
      maxAssetSize: 30000000,
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith(".js");
      },
    };
    config.plugins.push(
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery",
      })
    );
    if (process.env.NODE_ENV === "production") {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240,
        })
      );
    }
  },
};

        

         
         
         
        
                展开全部
                
         
         
          
         
         
         
           
         评论
                   
         
         
          
      •    
        GISer Liu  2024-04-17 11:18
         关注
          
        

        该回答引用自GPT-3.5,由博主GISer Liu编写：
        

        

        根据你提供的错误信息和 webpack 配置，问题出现在解析 LRUCache.js 文件时，webpack 报错说是遇到了意外的
        token，这可能是由于 webpack 默认不知道如何处理这种文件类型导致的。
        解决这个问题的思路是告诉 webpack 如何处理 .js 文件，以及哪些 loader 应该用于处理它们。对于 LRUCache.js 文件中的语法，可能是因为使用了不被当前环境所支持的新语法，比如这里报错的地方使用了可选链语法 ?.，这是
        ES2020 中的语法，需要使用相应的 babel 转换器来转换。
        首先，需要安装 @babel/plugin-proposal-optional-chaining 插件，它可以帮助我们处理可选链语法。
        bashCopy code
        

        npm install --save-dev @babel/plugin-proposal-optional-chaining

        

        然后，在你的 babel.config.js 文件中配置该插件：
        javascriptCopy code
        

        module.exports = {
presets: [
// other presets
],
plugins: [
"@babel/plugin-proposal-optional-chaining"
// other plugins
]
}

        

        接着，确保你的 webpack 配置中配置了相应的 babel loader 来处理 .js 文件。你可以使用 babel- loader 并与 Babel 相关的配置一起使用，以确保正确转换 JavaScript 代码。在你的 webpack 配置中添加以下代码：
        javascriptCopy code
        

        module.exports = {
// 其他配置...
module: {
rules: [
// 其他规则...
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [
"@babel/plugin-proposal-optional-chaining"
// 可以添加其他需要的插件
]
}
}
}
]
}
};

        

        这样配置后，webpack 就能正确地解析和转换 LRUCache.js 文件中的语法，包括可选链语法。
        记得重新运行 webpack 构建，看看问题是否已解决。
        

        

        如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑
        

        

         
         
         
        
                展开全部
                
         
         
          
         
         
         
           
         评论
                   
         
         
          
      •    
        CSDN-Ada助手 CSDN-AI 官方账号  2024-04-17 12:12
         关注
          
        【相关推荐】



        如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
         
         
         
         
          
         
         
         
           
         评论
                   
         
         
          
        
       
       
      编辑
       
      预览
       
        
        
       
       
      
          报告相同问题？
        
       
         
       
             
                    
                

                
    • 

                    相关阅读:
      
                    
AutoComplete(自动完成)                            
      
通过1688APP分享商品链接淘口令获取商品详情接口，淘口令返利接口，1688淘口令API接口，淘口令解析接口演示案例                            
      
Redis - 启动                            
      
基础的语法                            
      
SSM - Springboot - MyBatis-Plus 全栈体系（三十一）                            
      
30-33、SpringBoot项目部署\属性配置方式\多环境开发（一个文件）\多环境分组（多个文件）                            
      
WLAN网络配置，vlan内漫游                            
      
卷起来了？2023这三个项目直接让你原地起飞！                            
      
【echarts】实现单线与多线滚轮联动、隐藏拖拽、关闭动画                            
      
netty学习 java-io                            
      
                          
                
      • 
                
    • 
                    原文地址：https://ask.csdn.net/questions/8089864
                
      •