亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Webpack:如何直接導出到包含樣式表導入的全局(不帶.default)?

Webpack:如何直接導出到包含樣式表導入的全局(不帶.default)?

肥皂起泡泡 2021-05-13 18:16:24
語境我有一個webpack.config.js這樣的:/* Something here */module.exports = {  entry: {    main: './src/index.js'  },  output: {    library: 'MyClass',    libraryTarget: 'umd',    path: path.resolve(__dirname, 'lib'),    filename: `package.js`  },  ...}我的./src/index.js樣子是這樣的:import MyClass from 'src/myClass'import 'src/myStyle.css'export default MyClass問題盡管這可以正常工作,但它會將MyClass類公開給window對象,如下所示:console.log(window.MyClass)=> Module {default: ?, __esModule: true, Symbol(Symbol.toStringTag): "Module"}這樣,我無法通過使用以下方式調用我的班級:new MyClass();=> TypeError: Slidery is not a constructor我必須像這樣調用它:new MyClass.default();=> MyClass { ... }我可以通過在我的代碼中執行以下操作來解決該問題./src/index.js:const MyClass = require('src/myClass')module.exports = MyClass/* in browser */new MyClass()=> Good, works fine但是,通過這種方式,我無法創建import樣式表:const MyClass = require('src/myClass')import 'src/myStyle.css'module.exports = MyClass=> TypeError: Cannot assign to read only property 'exports' of object '#<Object>'編輯以下方法也可以解決問題,但無需使用即可完成export:/* webpack.config.js */module.exports = {  entry: {    main: './src/index.js'  },  output: {    /* Need to remove library related props */    // library: 'MyClass',    // libraryTarget: 'window',    path: path.resolve(__dirname, 'lib'),    filename: `package.js`  },  ...}/* ./src/index.js */import MyClass from 'src/myClass'import 'src/myStyle.css'window.MyClass = MyClass問題是否有針對的WebPack我的方式export直接向全球的模塊,而不必與調用.default ,并在同一時間import在入口文件樣式表?
查看完整描述

2 回答

?
qq_笑_17

TA貢獻1818條經驗 獲得超7個贊

output.libraryExport在您的中使用webpack.config.js。(參考

連同output.libraryTargetset to一起umd,output.libraryExport告訴Webpack將哪個屬性作為由命名的全局變量導出output.library

在你的情況下,除了原本的設定,設定output.libraryExportdefault就是等價的編譯代碼后添加以下代碼片段。

window.MyClass /*output.library*/ = module.exports.default /*output.libraryExport*/

配置如下。

/* Something here */


module.exports = {

  entry: {

    main: './src/index.js'

  },

  output: {

    library: 'MyClass',

    libraryTarget: 'umd',

    libraryExport: 'default',  // export the default as window.MyClass

    path: path.resolve(__dirname, 'lib'),

    filename: `package.js`

  }

}

在控制臺中嘗試一下。


> window.MyClass

class {...}


查看完整回答
反對 回復 2021-05-20
?
Cats萌萌

TA貢獻1805條經驗 獲得超9個贊

如果僅將腳本設計為可在Web瀏覽器中運行,為什么不直接進行window顯式更新:


import MyClass from 'src/myClass'

import 'src/myStyle.css'


window.MyClass = MyClass;

我認為這比使用間接更清楚。


查看完整回答
反對 回復 2021-05-20
  • 2 回答
  • 0 關注
  • 200 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號