精华内容
下载资源
问答
  • 升级项目:vue2+webpack4+babel7 最近需要将vue项目升级,以获得更好的构建性能和开发便利,由于网上没有一个可以参考的实用用性文章,故此将升级项目过程记录并分享给各位,希望对各位有用。也欢迎关注本人的公众号...

    项目升级目标:

    原版项目:vue2+webpack3+babel6
    升级项目:vue2+webpack4+babel7

    最近需要将vue项目升级,以获得更好的构建性能和开发便利,由于网上没有一个可以参考的实用用性文章,故此将升级项目过程记录并分享给各位,希望对各位有用。也欢迎关注本人的公众号:前端学海

    根据多次尝试总结出的经验,先升级与webpack无关的组件,然后再升级webpack,注意webpack不同的版本需要的webpack-cli也不同,否则会产生兼容报错,切记!!!

    最好按照一下给出的升级顺序进行,每个包后面的版本为我升级成功的包的版本,大部分是我升级时的最高稳定版,给位可以根据自己的需要,升级到指定版本。小心升级哦~

    项目包的升级和卸载:

    babel部分:

    (1)babel-core卸载掉,从新安装@babel/core
    npm un babel-core // 卸载 不然不同版本的core会发生冲突,构建失败
    
    npm i -D @babel/core // 重新安装babel7的core
    npm i -D babel-loader@8.1.0 // babel7需要babel-loader8以上的版本,否则报错
    npm i -D @babel/polyfill  "@babel/polyfill": "^7.10.1", 
    npm i -D @babel/runtime   "@babel/runtime": "^7.10.2",
    npm i -D @babel/plugin-transform-runtime "@babel/plugin-transform-runtime": "^7.10.1",
    npm i -D @babel/preset-env "@babel/preset-env": "^7.10.2",
    
    // 安装后,卸载不需要的babel6的相关插件,进行.babelrc 的文件配置
    {
      "presets": [
        ["@babel/env", { // babel7的写法,
          "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1"
          },
          "corejs": "2", // 指定编译的corejs版本,否则构建线上环境时会报警告
          "useBuiltIns": "usage"
        }]
      ],
      "plugins": ["transform-vue-jsx", "@babel/plugin-transform-runtime"]
    }
    
    // 如果编译报错:
     this.setDynamic is not a function
     Cannot find module '@transform-runtime/babel-plugin'
     // 诸如此类,大部分均为部分配置写法未从babel6转为babel7的写法问题
    

    到这里基本的babel的替换完成,项目启动成功

    webpack部分:

    注意:webpck4,需要升级其他包,否则webpack4不支持,会运行报错,如
    
    webpack-dev-server、vue-loader 15版本以上html-webpack-plugin最新版 stylus-loader最新版
    
    1、安装全局webpack-cli cnpm install webpack-cli -g
    2、安装项目webpack-cli cnpm install --save-dev webpack-cli
    3、升级webpack npm install webpack@4.43.0 -D
    4、升级 webpack-dev-server cnpm install webpack-dev-server@3.1.14 -D // webpack4需要webpack-dev-server 3以上的版本,否则不兼容会报错
    5、升级vue-loader cnpm install vue-loader@15.0.0 -D
    6、cnpm install html-webpack-plugin@3.2.0 -D
    7、安装mini-css-extract-plugin -D 替换卸载 extract-text-webpack-plugin
    8、升级 stylus-loader cnpm i stylus-loader@3.0.2 -D 最新版本
    

    修改原项目的配置,和删除废弃的插件配置:

    1、utils.js

    // const ExtractTextPlugin = require('extract-text-webpack-plugin') // dl删除
    const MiniCssExtractPlugin = require('mini-css-extract-plugin') // dl新增
    
     if (options.extract) {
          // return ExtractTextPlugin.extract({ dl 删除
          //   use: loaders,
          //   fallback: 'vue-style-loader',
          //   publicPath: '../../'
          // })
          return [MiniCssExtractPlugin.loader].concat(loaders) // dl新增
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
    

    2、webpack.dev.conf.js

    const { VueLoaderPlugin } = require('vue-loader') // dl新增
    mode: 'development', // 新增
    new VueLoaderPlugin(), //dl新增
    

    3、webpack.base.conf.js

    {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          exclude: /node_modules/,
          options: {
            limit: 10000,
            publicPath: '../../', // 添加路径,否则element icon图标路径不对,打包后不显示,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
          }
        },
    

    4、webpack.prod.conf

    const { VueLoaderPlugin } = require('vue-loader') // dl新增
    const MiniCssExtractPlugin = require('mini-css-extract-plugin') // dl 新增
    // const ExtractTextPlugin = require('extract-text-webpack-plugin') // dl 删除
    mode: 'production', // 新增
     optimization: { // dl新增
        runtimeChunk: {
          name: 'manifest'
        },
        minimizer: [
          new UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: config.build.productionSourceMap,
            uglifyOptions: {
              warnings: false
            }
          }),
          new OptimizeCSSPlugin({
            cssProcessorOptions: config.build.productionSourceMap
              ? { safe: true, map: { inline: false } }
              : { safe: true }
          }),
        ],
        splitChunks: {
          chunks: 'async',
          minSize: 30000,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          name: false,
          cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendor',
              chunks: 'initial',
              priority: -10
            }
          }
        }
      },
      plugins: [
           new VueLoaderPlugin(), //dl新增
           // new ExtractTextPlugin({ dl--删除
        //   filename: utils.assetsPath('css/[name].[contenthash].css'),
        //   // Setting the following option to `false` will not extract CSS from codesplit chunks.
        //   // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
        //   // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
        //   // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
        //   allChunks: true,
        // }),
        new MiniCssExtractPlugin({ // dl 新增
          filename: utils.assetsPath('css/[name].css'),
          chunkFilename: utils.assetsPath('css/[name].[contenthash].css')
        }),
         //--------------------dl 删除
        // new webpack.optimize.CommonsChunkPlugin({
        //   name: 'vendor',
        //   minChunks (module) {
        //     // any required modules inside node_modules are extracted to vendor
        //     return (
        //       module.resource &&
        //       /\.js$/.test(module.resource) &&
        //       module.resource.indexOf(
        //         path.join(__dirname, '../node_modules')
        //       ) === 0
        //     )
        //   }
        // }),
        // // extract webpack runtime and module manifest to its own file in order to
        // // prevent vendor hash from being updated whenever app bundle is updated
        // new webpack.optimize.CommonsChunkPlugin({
        //   name: 'manifest',
        //   minChunks: Infinity
        // }),
        // // This instance extracts shared chunks from code splitted chunks and bundles them
        // // in a separate chunk, similar to the vendor chunk
        // // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
        // new webpack.optimize.CommonsChunkPlugin({
        //   name: 'app',
        //   async: 'vendor-async',
        //   children: true,
        //   minChunks: 3
        // }),
      ]
      
      
    
    
    可能会报错:
    Cannot find module 'webpack-cli/bin/config-yargs'
    直接删除node_modul包,重新下载即可
    

    我的项目到这里就运行正常了,仅仅是对vue-cli脚手架的基本配置进行升级,也没有什么大的优化,只是升级,基本满足一般的项目使用,

    后期开始进行逐个优化,个人建议:一定要先升级完babel,再来升级webpack, 根据我之前几次失败的折腾总结的经验。

    后面一篇文章,会分享我升级后的vue项目的具体优化步骤,升级了哪些?有什么作用?效果怎样?

    欢迎各位批评指正!!!
    
    展开全文
  • 排查后发现原来babel升级了一个大版本,已经到7.X了,这里我总结一下升级过程中踩到的坑。 Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd ...
  • Vue2-SPA 可能是全网最干净的vue脚手架 Webpack 4.x Vue.js项目 所有第三方包都已更新到最新 没有多余的代码,让你自己建造,自己玩 现场演示 该实时演示可在 (移动端,打开浏览器开发者工具并调到手机窗口中找到。...
  • babel6升级babel7

    千次阅读 2019-10-28 11:42:00
    一、Babel 7 库的作用域 (scope) (1)Babel 7 用了 npm 的 private scope,把全部的包都挂在在 @babel 下,类似的有 typescript 的 @type。 (2)Babel 7 提供多种配置 ...先看一下babel7配置成功后的样子...

    一、Babel 7 库的作用域 (scope)

    (1)Babel 7 用了 npmprivate scope,把全部的包都挂在在 @babel 下,类似的有 typescript@type

    (2)Babel 7 提供多种配置

    1. .babelrc
    2. babel.config.js
    3. webpack babel loader

    二、babel7 相关文件

    先看一下babel7配置成功后的样子


    babel.config.js

    const presets = [
      [
        '@babel/env',
        {
          targets: {
            edge: '17',
            firefox: '60',
            chrome: '67',
            safari: '11.1',
            browsers: ['last 2 versions', 'ie >= 7']
          }
        }
      ]
    ]
    module.exports = { presets }
    
    

    babel 7 开始, .babelrc 的作用范围仅限于当前项目,默认不再作用与 node_modules 和工作区 (./packages/*),如果需要,可以指定作用范围

    在项目 rootDir(项目根目录)创建 babel.config.js

    .babelrc

    {
      "presets": [
        [
          "@babel/env",
          {
            "targets": {
              "chrome": "58",
              "ie": "10"
            },
            "useBuiltIns": "usage"
          }
        ]
      ],
      "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-proposal-object-rest-spread",
        "transform-vue-jsx"
      ]
    }
    

    package.json
    在这里插入图片描述

    在这里插入图片描述

    三、升级步骤

    (1)babel-core卸载掉,从新安装@babel/core

    npm un babel-core
    
    npm i -D @babel/core
    
    npx babel-upgrade --write --install
    
    

    (2).babelrc 引入插件解析

    "plugins": [ "@babel/plugin-transform-runtime", "@babel/plugin-syntax-dynamic-import", "@babel/plugin-proposal-object-rest-spread", "transform-vue-jsx" ]
    
    

    (3)在package.json文件中 删除babel6 相关的依赖

    "devDependencies":{
    
    }
    
    "dependencies":{
    
    }
    
    

    中 看后面是有babel 版本号写6.XX.XX的都删掉

    (4)删除文件夹 node_module 然后重新安装

    rm -rf node_modules
    yarn install
    
    展开全文
  • TF:babel部分webpack部分 升级前项目配置:vue 2 + webpack 3 +babel 6 升级后项目配置:vue 2 + webpack 4 +babel 7 babel部分 注意:babel-core需要卸载掉,从新安装@...npm i -D babel-loader // babel7需要bab

    升级前项目配置:vue 2 + webpack 3 +babel 6

    升级后项目配置:vue 2 + webpack 4 +babel 7

    babel部分

    注意:babel-core需要卸载掉,从新安装@babel/core
    npm un babel-core // 卸载 不然不同版本的core会发生冲突,构建失败
    
    npm i -D @babel/core // 重新安装babel7的core
    npm i -D babel-loader // babel7需要babel-loader8以上的版本,否则报错
    npm i -D @babel/polyfill   
    npm i -D @babel/runtime   
    npm i -D @babel/plugin-transform-runtime "
    npm i -D @babel/preset-env 
    
    // 安装后,卸载不需要的babel6的相关插件,进行.babelrc 的文件配置
    {
      "presets": [
        ["@babel/preset-env", { // babel7的写法,
          "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1"
          },
          "corejs": "2", // 指定编译的corejs版本,否则构建线上环境时会报警告
          "useBuiltIns": "usage"
        }]
      ],
      "plugins": ["transform-vue-jsx", "@babel/plugin-transform-runtime"]
    }
    
    // 如果编译报错:
     this.setDynamic is not a function
     Cannot find module '@transform-runtime/babel-plugin'
     // 诸如此类,大部分均为部分配置写法未从babel6转为babel7的写法问题和引入包名需要改变
    

    升级中遇到的问题:
    1. 修改引用了babel-polyfill的插件名称的地方 ==》 @babel/polyfill
    2. babel 7 已经删除了babel-preset-stage-2
    注意: 如果你使用了cube-ui且采用的后编译模式,还一个需要将 .babelrc文件转换成babel.config.js文件,不然就会报错如下:

    ERROR  Failed to compile with 2 errors                                                                3:04:52 ├F10: PM┤
    
    error  in ./node_modules/cube-ui/src/components/dialog/dialog.vue
    
    Module parse failed: Unexpected token (115:17)
    You may need an appropriate loader to handle this file type.
    |
    |       default() {
    |         return { ...defConfirmBtn
    |         };
    |       }
    @ ./node_modules/cube-ui/src/components/dialog/dialog.vue 8:0-384 9:0-397
    @ ./node_modules/cube-ui/src/modules/dialog/index.js
    @ ./node_modules/cube-ui/src/module.js
    @ ./node_modules/cube-ui/src/index.js
    @ ./src/main.js
    @ multi (webpack)-dev-server/client?http://192.168.1.51:8080 webpack/hot/dev-server @babel/polyfill ./src/main.js
    

    webpack部分

    注意:webpck4,需要升级其他包,否则webpack4不支持,会运行报错,如
    
    webpack-dev-server最新版、vue-loader 15版本以上html-webpack-plugin最新版 stylus-loader最新版
    
    1、安装全局webpack-cli cnpm install webpack-cli@^3 -g
    2、安装项目webpack-cli cnpm install --save-dev webpack-cli@^3
    3、升级webpack npm install webpack@^4 -D
    4、升级 webpack-dev-server cnpm install webpack-dev-server -D // webpack4需要webpack-dev-server 3以上的版本,否则不兼容会报错
    5、升级vue-loader cnpm install vue-loader@^15 -D
    6、cnpm install html-webpack-plugin@^4 -D
    7、安装mini-css-extract-plugin -D 替换卸载 extract-text-webpack-plugin
    8、升级 stylus-loader cnpm i stylus-loader@^3 -D 最新版本
    

    修改原项目的配置,和删除废弃的插件配置:
    1、utils.js

    // const ExtractTextPlugin = require('extract-text-webpack-plugin') // dl删除
    const MiniCssExtractPlugin = require('mini-css-extract-plugin') // dl新增
    
     if (options.extract) {
          // return ExtractTextPlugin.extract({ dl 删除
          //   use: loaders,
          //   fallback: 'vue-style-loader',
          //   publicPath: '../../'
          // })
          return [MiniCssExtractPlugin.loader].concat(loaders) // dl新增
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
    

    2、webpack.dev.conf.js

    ……
    const { VueLoaderPlugin } = require('vue-loader') // dl新增
    ……
    const devWebpackConfig = merge(baseWebpackConfig, {
      mode: 'development', // 新增
      module: {
        rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
      },
      ……
      plugins: [
      new VueLoaderPlugin(), //dl新增
      ]
    }
    

    3、webpack.base.conf.js

    {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          exclude: /node_modules/,
          options: {
            limit: 10000,
            publicPath: '../../', // 添加路径,否则element icon图标路径不对,打包后不显示,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
          }
     },
    

    4、webpack.prod.conf

    const { VueLoaderPlugin } = require('vue-loader') // dl新增
    const MiniCssExtractPlugin = require('mini-css-extract-plugin') // dl 新增
    // const ExtractTextPlugin = require('extract-text-webpack-plugin') // dl 删除
    const devWebpackConfig = merge(baseWebpackConfig, {
     mode: 'production', // 新增
     optimization: { // dl新增
        runtimeChunk: {
          name: 'manifest'
        },
        minimizer: [
          new UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: config.build.productionSourceMap,
            uglifyOptions: {
              warnings: false
            }
          }),
          new OptimizeCSSPlugin({
            cssProcessorOptions: config.build.productionSourceMap
              ? { safe: true, map: { inline: false } }
              : { safe: true }
          }),
        ],
        splitChunks: {
          chunks: 'async',
          minSize: 30000,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          name: false,
          cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendor',
              chunks: 'initial',
              priority: -10
            }
          }
        }
      },
      plugins: [
           new VueLoaderPlugin(), //dl新增
           // new ExtractTextPlugin({ dl--删除
        //   filename: utils.assetsPath('css/[name].[contenthash].css'),
        //   // Setting the following option to `false` will not extract CSS from codesplit chunks.
        //   // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
        //   // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
        //   // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
        //   allChunks: true,
        // }),
        new MiniCssExtractPlugin({ // dl 新增
          filename: utils.assetsPath('css/[name].css'),
          chunkFilename: utils.assetsPath('css/[name].[contenthash].css')
        }),
         //--------------------dl 删除
        // new webpack.optimize.CommonsChunkPlugin({
        //   name: 'vendor',
        //   minChunks (module) {
        //     // any required modules inside node_modules are extracted to vendor
        //     return (
        //       module.resource &&
        //       /\.js$/.test(module.resource) &&
        //       module.resource.indexOf(
        //         path.join(__dirname, '../node_modules')
        //       ) === 0
        //     )
        //   }
        // }),
        // // extract webpack runtime and module manifest to its own file in order to
        // // prevent vendor hash from being updated whenever app bundle is updated
        // new webpack.optimize.CommonsChunkPlugin({
        //   name: 'manifest',
        //   minChunks: Infinity
        // }),
        // // This instance extracts shared chunks from code splitted chunks and bundles them
        // // in a separate chunk, similar to the vendor chunk
        // // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
        // new webpack.optimize.CommonsChunkPlugin({
        //   name: 'app',
        //   async: 'vendor-async',
        //   children: true,
        //   minChunks: 3
        // }),
      ]
    } 
    

    可能会报错:
    Cannot find module ‘webpack-cli/bin/config-yargs’

    解决办法一: 直接删除node_modul包,重新下载

    解决办法二: 将webpack-cli的版本降低到4以下

    展开全文
  • 当前项目是通过当时Vue-CLI 2.x生成使用,配置是babel 6编译、webpack 3.x打包。由于项目发展到某个阶段,需要升级优化。目标是打包速度更快、bundle体积更小。 本文通过分享代码片段讲述部分版本升级后的不同以及...

    序言

          当前项目是通过当时Vue-CLI 2.x生成使用,配置是babel 6编译、webpack 3.x打包。由于项目发展到某个阶段,需要升级优化。目标是打包速度更快、bundle体积更小。
          本文通过分享代码片段讲述部分版本升级后的不同以及可能发生的报错案例,达到让小伙伴们能找到对应的解决办法,减少升级版本的恐惧感。

    正文

    第一部分 Webpack

    1. mode 模式

    通过配置 mode,可选 production生产环境 和 development 开发环境。

    2. 基本配置

    1. 移除 loaders,使用 rules 代替

      // webpack.base.config.js
      module: {
      -    loaders: {}
      +    rules: {}
      }
      复制代码
    2. 插件 CommonsChunkPlugin 替换成配置 optimization.splitChunksoptimization.runtimeChunk
      参考:webpack.js.org/plugins/spl…
      webpack 3 CommonsChunkPlugin插件:

       
       new webpack.optimize.CommonsChunkPlugin({
           name: 'vendor',
           minChunks: 2
       }),
       // webpack 相关代码打包到一个文件
       // 新模块加入给新模块加一个id
       // 规避长缓存问题
       new webpack.optimize.CommonsChunkPlugin({
           name: 'runtime'
       })
      复制代码

      webpack 4 替代者 splitChunks & runtimeChunk

      optimization: {
          splitChunks: {
              cacheGroups: {
                  vendor: {
                      name: 'vendor',
                      minChunks: 2
                      // 可选 'initial | async | all',
                      // 分别代表,初始化时加载、异步加载、两者皆使用
                      chunks: 'all'  
                      // 代表权重值,值越大,打包优先级越高
                      priority: 10 
                  }
              }
          },
          runtimeChunk: {
              name: 'runtime'
          }
      }
      复制代码

    3. 生产环境 production

    生产环境下简化配置,默认开启插件 UglifyJsPlugin

    // webpack.prod.config.js 
    module.exports = { 
    + mode: 'production', 
    - plugins: [ 
    -   new UglifyJsPlugin(/* ... */), 
    -   new webpack.DefinePlugin({ 
    -       "process.env.NODE_ENV": JSON.stringify("production") }), 
    -   new webpack.optimize.ModuleConcatenationPlugin(), 
    -   new webpack.NoEmitOnErrorsPlugin()
    - ]
    }
    复制代码

    当然,生产环境依然可以通过配置关闭 UglifyJsPlugin

    optimization: {
        minimize: false
    }
    复制代码

    4. 开发环境 development

    1. devServer
      webpack3 需要手写 dev-server.js
      webpack4 使用webpack配置
      // webpack.dev.config.js
      devServer: {
          open: true,              // 自动打开浏览器页面
          host: 'xxx.xxx.com',     // host
          openPage: 'xxx'          // 路径
          historyApiFallback: true // 启用 history模式
          proxy: 'xxx'             // 代理配置  
      }
      复制代码

    5. package.json

    由于开发环境的devServer使用方式有变化,所以 package.jsonscripts 也需要修改,否则会报如下错误:
    ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\workspace'
    正确修改配置:

    // package.json
    {
        "scripts": {
    -        "dev": "node build/dev-server.js",
    +        "dev": "webpack-dev-server --config build/webpack.dev.config.js"        
        }
    }
    复制代码

    5. 插件安装/升级

    如果小伙伴正在使用以下插件,请按详情变更使用,并且可能出现报错解决:

    1. vue-loader v15
    2. thread-loader
    3. eslint-loader v5
    4. copy-webpack-plugin
    5. html-webpack-plugin v4
    6. mini-csss-extract-plugin 替代 extract-text-webpack-plugin
    7. script-text-html-webpack-plugin 废弃

    详细:

    1. vue-loader v15
      从 v14 迁移

      // webpack.base.config.js
      const VueLoaderPlugin = require('vue-loader/lib/plugin')
      
      module.exports = {
        // ...
          plugins: [
              new VueLoaderPlugin()
          ]
      }
      复制代码
    2. thread-loader
      本来打算使用 HappyPack ,可是vue-loader@15 不完全支持 HappyPack
      现在这个Issue已经关闭,所以小伙伴可以继续尝试用 HappyPack 进行优化,记得反馈哦。

    3. eslint-loader v5
      如有eslint报错如下:
      cannot read property 'eslint' of undefined
      添加配置:

      plugins: [
          new webpack.LoaderOptionsPlugin({ options: {} })
      ]
      复制代码

      如有警告如下:
      [ESLINT_LEGACY_OBJECT_REST_SPREAD] DeprecationWarning. The 'parserOptions.ecmaFeatures.experimentalObjectRestSpread' option is deprecated. Use 'parserOptions.ecmaVersion' instead
      修改配置:

      // .eslintrc.js
      parserOptions: {
          parse: 'babel-eslint',
          ecmaVersion: 8,
      -   ecmaFeatures: {
      -       experimentalObjectRestSpread: true
      -   }
      }
      复制代码
    4. copy-webpack-plugin
      如有报错如下: TypeError: compilation.contextDependencies.push is not a function 升级插件

      npm i copy-webpack-plugin@latest -D
      复制代码
    5. html-webpack-plugin v4 如果小伙伴使用 html-webpack-plugin 提供的钩子扩展了自己定义的插件,可能会发生以下错误:
      Plugin could not be registered at 'html-webpack-plugin-before-html-generation'. Hook was not found. BREAKING CHANGE: There need to exist a hook at 'this.hooks'.
      TypeError: callback is not a function
      this.htmlWebpackPlugin.getHooks is not a function
      原因:这三者都是因为升级版本或者使用hooks的方式改变了而导致。
      参考:
      www.npmjs.com/package/htm…
      github.com/jantimon/ht…
      解决:

      //plugin.js
      const HtmlWebpackPlugin = require('html-webpack-plugin');
       
      class MyPlugin {
        apply (compiler) {
          compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
            console.log('The compiler is starting a new compilation...')
       
            // Staic Plugin interface |compilation |HOOK NAME | register listener 
            HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
              'MyPlugin', // <-- Set a meaningful name here for stacktraces
              (data, cb) => {
                // Manipulate the content
                data.html += 'The Magic Footer'
                // Tell webpack to move on
                cb(null, data)
              }
            )
          })
        }
      }
       
      module.exports = MyPlugin
      复制代码
    6. mini-csss-extract-plugin
      这是在我们的项目升级过程中,最容易出现问题的插件。
      ① 修改Vue-CLI 2 生成关于处理样式的 utils.js
      如下:

      // const ExtractTextPlugin = require("extract-text-webpack-plugin");
      const MiniCssExtractPlugin = require('mini-css-extract-plugin')
      ...
      // 找到:
      - if (options.extract) { 
      - //options.extract = NODE_ENV === 'production'
      -    return ExtractTextPlugin.extract({
      -        use: loaders,
      -        fallback: 'vue-style-loader'
      -    })
      - } else {
      -    return ['vue-style-lodaer'].concat(loaders))
      - }
      
      + return [options.extract ? 
      +    MiniCssExtractPlugin.loader : 
      +    'vue-style-loader'
      + ].concat(loaders)
      复制代码

      ② 报错:document is not defined
      解决:区分环境使用 mini-css-extract-plugin(production) 和 vue-style-loader(development),如 ① 配置即可

      ③ 报错:cannot read property pop of undefined
      原因:是webpack optimize时候产生的,小编也一知半解,不好解释。
      参考:

      1. github.com/webpack-con…
      2. github.com/webpack-con…

      ④ 警告:[mini-css-extract-plugin] Conflicting order between
      原因:不同CSS模块里,引入同一个CSS,而引入的顺序不一样产生的警告。
      参考:github.com/webpack-con…
      解决:屏蔽警告

      // 安装依赖
      npm i -D webpack-filter-warnings-plugin
      
      // 配置插件
      plugins: {
          new FilterWarningsPlugin({
              exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
          })
      }
      复制代码

      ⑤ 疑惑:打包后,产生很多小的css文件,能不能把他们都打包成一个css文件
      原因:vue-loader@15 会把 <style lang="less"> 当作 *.less
      参考:vue-loader.vuejs.org/zh/migratin…
      解决:弃用 mini-css-extract-plugin,重用 extract-text-webpack-plugin 并升级版本。且把utils.js的配置如原来升级前。

      npm i -D extract-text-webpack-plugin@next
      复制代码

      但是,这里可能会产生报错,如下: Error: Path variable [contenthash:8] not implemented in this context: [name]_[contenthash:8].css
      原因:插件的临时版本@next并不支持contenthash。 参考:github.com/webpack-con…
      解决:

      plugins: [
          new ExtractTextPlugun({
       -       filename: '[name].[contenthash:8].css'
       +       filename: '[md5:contenthash:hex:20]'
          }})
      ]
      复制代码

      注意,现在extract-text-webpack-plugin已经不更新了,所以最好还是使用官方推荐的 mini-css-extract-plugin

    7. script-text-html-webpack-plugin
      原因:插件暂不支持 webpack4,将会在 v2版 实现
      解决:使用preload-webpack-plugin

    6. 其他警告或报错

    1. You may need an appropriate loader to handle this file type
      原因:package.json 里安装依赖变化了,但是由于 package-lock.json 存在。
      解决办法:
      全局配置一劳永逸:

      npm config set package-lock false
      复制代码

      解决当前项目:
      删除 package-lock.jsonnode_modules,重新执行命令 npm install

    2. __webpack_hmr 404 not found
      原因:webpack 配置 entry 数组里面有 build/dev-client 的配置
      解决:删除这个配置即可

    3. 部分文件内作用域 this = undefined
      原因:不明
      解决:this 改为 window

    4. warn: entrypoint = undefined
      解决:不用理会

    第二部分 Babel

    1. 版本升级

    # 不安装到本地而是直接运行命令,npm 的新功能
    npx babel-upgrade --write
    
    # 或者常规方式
    npm i babel-upgrade -g
    babel-upgrade --write
    
    # 更新 babel 配置 并且 安装依赖
    npx babel-upgrade --write --install
    复制代码

    2. 配置文件

    这里区分需不需要编译 node_modules 里面的依赖。
    如果需要,删除项目根目录下 .babelrc 改为使用 babel.config.js

    3. polyfill

    1. 推荐使用 @babel/preset-env 并按需引入 polyfill
      babel 7: @babel/polyfill
      babel 6: babel-polyfill
    2. Promise等ES6语法,在 Android 4.4以下 和 IE 的兼容问题
      // node 环境
      require('@babel/polyfill')
      
      // ES6 main.js
      import('@babel/polyfill')
      
      // webpack.base.config.js
      entry: ['@babel/polyfill', 'main.js']
      复制代码

    转载于:https://juejin.im/post/5cb878c76fb9a068864218c0

    展开全文
  • 主要介绍了babel7.x和webpack4.x配置vue项目的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • babel6升级babel7

    2021-07-10 12:02:37
    0、神秘升级代码 npm un babel-core npm i -D @babel/core npx babel-upgrade --write --install 1、先看更新前的babel .babelrc { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["&...
  • babel7 升级

    2019-09-24 12:01:19
    升级babel7 : 安装 其中babel/preset-env相当于 es2015 ,es2016 ,es2017 及最新版本。 npm install -D babel-loader @babel/core @babel/preset-env webpack 1、如要使用Promises等,还需要引入Babel的 ...
  • //从今天开始, 每天总结一个vue实际开发中的应用点(以下内容是个人认为的最佳实践, 如果有异议, 可以评论留言呐) //当然了, 留言我不一定改, 不留言我肯定不改 //重点内容我会加重字体, 可以提炼 一、babel 作用: ...
  • 先说明一下,es2020新语法只能用在js文件中,不能用在vue文件中 1.操作运算符:?? 当左侧操作数为 null 或 undefined 时,其返回右侧的操作数,否则返回左侧的操作数。与逻辑或 || 运算符不同的是,逻辑或会在左...
  • vue项目安装babel巧用es2020新语法

    千次阅读 2021-05-05 19:49:23
    对应babel插件:@babel/plugin-proposal-nullish-coalescing-operator 方法介绍:当左侧操作数为 null 或 undefined 时,其返回右侧的操作数,否则返回左侧的操作数。与逻辑或 || 运算符不同的是,逻辑或会在左操作...
  • babel-plugin-istanbul, 将伊斯坦布尔仪器添加到ES6代码的babel插件 babel-plugin-istanbul 你有问题我想贡献? 加入我们的社区松弛 。Istanbul插件,用于使用伊斯坦布尔覆盖工具编写代码。 它可以立即与业力覆盖和 ...
  • 这里针对jsx语法支持和babel7配置做踩坑记录: 需求背景:@2.0中一直在用一款滚动条插件EasyScroll,此插件依赖JSX语法, 原用法 1.安装vue-jsx插件 npm install\ babel-plugin-syntax-jsx\ babel-plugin-...
  • npm install -D babel-loader @babel/core @babel/preset-env webpack vue-loader 新版本 babel-loader 默认支持es7语法! 如果需要给 node_modules 内的文件支持es7 则需要如下 正确示范 内配置 如果只是单纯支持 ...
  • 借着最近终于将项目各依赖升级至最新的机会,记录一下新版webpack和babel的配置,后续还会记录一下我再生产环境所做的优化以及基于gitlab的CI、CD配置。 1.目录结构 github.com/lixianfeng1… 2.webpack 配置 2.1 ...
  • 现在我们直接使用官方推荐的 Babel升级工具 来升级现有项目试试 1. 使用Babel升级工具 # 不安装,直接使用npx来执行 npx babel-upgrade --write # 或是安裝 babel-upgrade 在 global 並執行 yarn global add babel-...
  • webpack中 babel 的配置(处理高级的es6语法或者es7语法) Vue中的render 函数 在 webpack 构建的项目中,使用Vue 进行开发 export default 和 export 的使用方式 结合webpack使用 vue-router 组件中style标签lang...
  • 背景:vue-cli3 + ant-design-vue 搭建的后台管理系统 需求:兼容IE(过低版本做版本升级提示) ——前期测试环境未做兼容性的处理,导致正式环境测试时发现使用某些浏览器(某360的5.0正式版及盗版Chrome(¬_¬)...
  • babel-upgrade babel 升级到 7.0 版本

    千次阅读 2020-02-22 00:27:20
    babel-upgrade 官方的介绍是这样的 ...字面意思是说 使用babel-upgrade 可以快速的把你的应用从 babel 6 更新到 babel 7 用法 安装环境: nodejs >=8 如果 npm<5.2 使用 npm install npx -g 安装...
  • vue cli 3 升级vue cli 4 方法步骤及升级点总结 官方升级英文文档,中文文档相对滞后。 简介:vue cli 4 官方已经更新有一段时间了,现在是4.0.5 版本,看了官方文档大概有二十几点的更新,还是干货满满呀,值得...
  • vue升级版本

    千次阅读 2020-02-26 15:25:13
    vue升级,一般就是升级 vuevue-template-compiler,两者的版本需要同步第一步第二步完成 第一步 npm update vue-template-compiler -D 或者 yarn add vue-template-compiler -D 第二步 npm update vue -S ...
  • 该工程模板中使用了 webpack 3 和 babel 6,由于 webpack 4 已发布,Babel 7 也出来挺长一段时间了,所以想对工程模板进行升级改造,以尝试工程化开发工具的最新特性。 关键调整 webpack工程模板本身是为大型应用...
  • 记录一次两年前的Vue项目升级。 包括vue配置、webpack配置、babel配置、eslint及husky配置
  • 项目vue2升级vue3记录之前的包版本更新版本嘛,多简单遇到的几个坑现在的package.json 之前的包版本 看视频的时候发现vue3的一些基础配置代码有变,比如出使用createApp,app.use(),app.mount(’#app’)等,跟我现在...
  • JSX到虚拟Hyperscript Babel插件 通过将转换为 。 此存储库本质上是transform-react-jsx除了它将子级作为数组而不是作为其他参数传递。 如果愿意,可以此问题的。 安装 npm install --save-dev babel-plugin-...
  • 项目升级vue3.0经验总结

    千次阅读 2020-12-17 16:53:13
    vue3.0正式版已经发布几个月了,ui框架也跟进的差不多了,咱也得紧跟潮流不能落伍,所以趁着空闲就升级了项目vue框架,由vue2.6升级vue3.0,总结下升级过程中的遇到的问题及解决方法。 一、项目简介 基于vue2框架...
  • Vue2.0项目工程升级3.0

    万次阅读 2020-07-16 15:31:34
    下面就简单分享一下我的升级过程因为我构建项目都是基于3.0的,所以对于2.0的用户可以先升级一下脚手架工具 已经装了2.0的话就需要先卸载 npm uninstall vue-cli -g 或 yarn global remove vue-cli 安装新版本...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,427
精华内容 1,370
关键字:

vue升级babel7

vue 订阅