在配置imports-loader时报错了

Question

module:{ // module的作用就是当你要打包某个模块就配置这个模块。如打包图片这个模块，就配置打包图片
    rules:[{ 
			test: /\.js$/, 
			exclude: /node_modules/, // exclude意思是排除。如果是在node_modules里的js文件(因为里面的js文件早就处理成ES5的代码了)，就不使用Babel来处理。
      use:[
        {
          loader:'babel-loader' // 使用Babel处理ES6语法
        },
        {
          loader:'imports-loader?this=>window' // 将模块中的this指向window
        }
      ],
      //**************************************和老师代码的区别就是没有将下面的配置放在.babelrc文件中，然后我运营npm run dev时就报错了**************************************************
      options:{  // babel的opstions如果配置项太多，可以在根目录写一个.babelrc文件(了解就行)，并将options所有配置放进去即可。 
        presets:[   //为babel配置参数preset
            ['@babel/preset-env'
              ,{//这个数组的第二个对象参数为preset的配置
                useBuiltIns:'usage', // 不把**所有**es6转es5的兼容代码打包到出口文件，只将你写的代码出现的es6语法，将这些es6转es5的兼容代码打包到出口文件，这样打包的文件会小很多。
                corejs: 3, // 现在光设置useBuiltIns为usage不行了，还需要设置corejs为3。注意要先安装corejs
              }
            ],
            '@babel/preset-react'
        ],
        plugins:['@babel/plugin-syntax-dynamic-import'] // 使用import异步加载时需要用到的插件
      }
		},]
  },

和老师代码的区别就是没有将babel的配置放在.babelrc文件中，然后我运营npm run dev时就报错了

Answer 1

weixin_慕丝7060995 2020-03-26 21:48:59

这里应该是把options 放在和babel-loader同级的对象里, 我这么写能启动起来

[{

    loader: 'babel-loader',

    options: {

        presets: [['@babel/preset-env', {

            targets: {

                chrome: '67'

            },

            corejs: '2',

            useBuiltIns: 'usage'

        }]],

        plugins:  ['transform-es2015-modules-commonjs']

    }

}, {

    loader: 'imports-loader?this=>window'

}]

Answer 2

Dell 2019-05-06 22:54:21

新版本loader不能加参数了，this=>window你查下imports-loader文档最新的配置方式，需要放到options里了

• 白马本白 #1

  老师，我看了下，把options删掉就行了，好像使用 imports-loader的话，use和options不能同时出现，我在官方网站里面没有看到最新的配置，还是这么写的

• Dell 回复 白马本白 #2

  是吗，同学帮我把文档这块解释的截图发我看下

• 白马本白 回复 Dell #3

  文档里面并没有说不能和options一起写，但是我在尝试的时候把options删掉才会起效果

点开查看后面1条评论