Skip to content

fet升级到2.x版本迁移步骤

Jump to bottom
angrytoro edited this page Dec 4, 2019 · 4 revisions

升级package.json

安装npm-check

  1. 执行npm install -g npm-check
  2. 执行npm-check -u
  3. 按空格键选择要升级的（特别注意：只升级编译需要用到的安装包，其他的不要升级，否则可能会引起你的项目出现问题。），选择完成之后，按enter键执行升级
  4. 由于mini-css-extract-plugin的bug，所以你只能先用比较低版本的，在升级完成之后，你要指定安装mini-css-extract-plugin到0.6.0版本，否则会报错

升级包参考

原先配置

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.6",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.7",
    "eslint": "^5.2.0",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "mustache-loader": "^1.4.0",
    "node-sass": "^4.6.1",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.19.0",
    "url-loader": "^0.5.9",
    "webpack": "^3.5.5",
    "webpack-merge": "^4.1.0"
  }

升级后配置

  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-env": "^7.6.3",
    "@babel/runtime": "^7.6.3",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "eslint": "^6.5.1",
    "file-loader": "^4.2.0",
    "mini-css-extract-plugin": "^0.6.0",
    "mustache-loader": "^1.4.3",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "url-loader": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-merge": "^4.2.2"
  }

更改配置文件名字

将原先ft.config.js名字改成fet.config.js

升级配置

升级js编译配置

将module.rules中test为/\.js$/的配置改成

{
          test: /\.js$/,
          include: [resolve('src')], // 注意这行，resolve是你自己定义的函数，根据自己实际情况来写
          use: {
            loader: 'babel-loader',
            options: {
              presets: [[require.resolve('@babel/preset-env'),{
                "modules": false,
                "targets": {
                  "browsers": [
                    "> 1%",
                    "last 2 versions",
                    "not ie <= 8"
                  ]
                }
              }]],
              plugins: [require.resolve('@babel/plugin-transform-runtime')],
              cacheDirectory: true
            }
          }
        }

删除.babelrc配置

将.babelrc配置删除

升级css编译配置

原先extract-text-webpack-plugin插件废弃，换成mini-css-extract-plugin,所以要引入mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

修改module.rules配置

  1. 将test: /\.css$/变更为
{
  test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader
      },
      'css-loader'
        ]
}
  1. 变更对应的sass或者less配置，以sass为例，将配置变更成如下
{
   test: /\.(scss|sass)$/,
     use: [
       {
          loader: MiniCssExtractPlugin.loader
       },
       'css-loader',
       'sass-loader'
       ]
}

更改plugins配置

将原先new ExtractTextPlugin(config.output.filename.replace('[ext]', '.css'))删除，然后新增

new MiniCssExtractPlugin({
        filename: config.output.filename.replace('[ext]', '.css'),
        chunkFilename: config.output.filename.replace('[ext]', '.css')
      })

修改css编译中的图片依赖（如果有必要的话）

编译的时候也需要对ccs中的图片依赖进行处理，之前处理是这样的

{
          test: /\.(scss|sass)$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [{
              loader: 'css-loader',
              options: {
                alias: {
                  './images': resolve('images')
                }
              }
            }, 'sass-loader']
          })

有没有发现里面有个alias配置，将css中的./images指向resolve('images')这个目录，升级之后，已经不能这么写了。 所以需要在fet.config.js的cssConfig配置加如下配置

cssConfig.resolve.alias = {
          './images': resolve('images')
        }

特别注意:cssConfig这个字段是根据fet.config.js中的webpackConfig: function (jsConfig, cssConfig, options)这个配置传过来的，所以名字要根据实际情况而定。

特别注意

一定要删除掉没有用到的代码，以及没有引用到的组件，不要遗留冗余的代码

Clone this wiki locally