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

Question

代码配置是

{
      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我已经下了几次了，还是这样，请老师指点一下吧

Answer 1

慕圣2430575 2020-12-18 01:44:16

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

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

Answer 2

百兽凯多00 2020-04-23 11:02:06

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

Answer 3

Dell 2019-12-14 18:26:04

你把loader的顺序换一下试试

• 提问者 哈士奇附体 #1

  试过了还是不行

• Dell 回复 提问者 哈士奇附体 #2

  业务代码发上来，完全一点的版本，我看看

• carrienon 回复 提问者 哈士奇附体 #3

  同学你后来解决了么

点开查看后面1条评论