在做shimmning的this的指向window的时候，添加这个imports-loader会报错

来源：4-11 Shimming 的作用

哈士奇附体

2019-12-13

代码配置是

{
      test: /\.js$/,
      exclude: /node_modules/,
      // loader: 'babel-loader',
      use: [{
        loader: 'imports-loader?this=>window'
      },{
        loader: 'babel-loader',
      } ]
},

报错原因

ERROR in ./src/index.js 4:0
Module parse failed: 'import' and 'export' may only appear at the top level (4:0)
File was processed with these loaders:
 * ./node_modules/imports-loader/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| (function() {
| 
> import _ from "lodash";
| import $ from "jquery";
| import fn from "./test.js";

如果把imports-loader这个loader去掉又可以了，我像会不会是loader的问题，但是imports-loader我已经下了几次了，还是这样，请老师指点一下吧

写回答

3回答

慕圣2430575

2020-12-18

这个问题我也碰到了, 不过我找到解决方式了

webpack配置:

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: [
        {
            loader: "babel-loader"
        },
        {
            loader: "imports-loader?wrapper=window",
        }
    ]
},

第一种是改用CommonJs写法

index.js

let $ = require('jquery');
let _ = require('lodash');
let {renderBody} = require('./jquery.ui');
console.log(this, window);
renderBody();

jquery.ui.js

module.exports = {
    renderBody
};
function renderBody() {
    //老代码直接使用$
    console.log(this, $);
    $('body').css({background: 'red'});
}

第二种应该是删掉js中的import, 在imports-loader里面配置imports, 这个我没试过讲道理应该OK

options: {   
 imports: {       
      moduleName: 'jquery',    
      name: '$',  
  },
 wrapper: 'window',
},

https://github.com/webpack-contrib/imports-loader/issues/39

百兽凯多00

2020-04-23

使用import-loader时，loader的文件内部要用cmd方法或者import()函数，直接写用import会报错'import' and 'export' may only appear at the top level

Dell

2019-12-14

你把loader的顺序换一下试试

哈士奇附体

carrienon

还没呢,这个用的比较少，直接就不搞了

2020-02-24

共4条回复

从基础到实战手把手带你掌握新版Webpack4.0

知识点+项目实例+原理讲解全方位解析Webpack4新版本

3627 学习 · 1291 问题

查看课程

相似问题

在配置imports-loader时报错了

回答 2

shimming中改变this指向的问题

回答 2

webpack5 现在已经不支持import-loader?this=>window写法了

回答 3

请问老师自定义loader报错

回答 1

this不指向window

回答 1

打开慕课网App查看更多内容