鍍金池/ 問答/HTML/ webpack打包的ES6代碼,import獲取的值為空/undefined

webpack打包的ES6代碼,import獲取的值為空/undefined

webpack配置如下啦:

const webpack = require('webpack')
const path = require('path')

const config = {
    context: path.resolve(__dirname, '../src'),
    entry: '../src/app.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            include: path.resolve(__dirname, '../src'),
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }]
        }]
    },
    plugins:[
    ]
}

module.exports = config

使用如上的webpack配置,打包app.js如下:

import a from './a'
import b from './b'
export{
    a,
    b
}

打包完發(fā)布npm,另一個(gè)項(xiàng)目使用該模塊包,import {a} from xxx,卻拿不到a或者b的值分別為undefined,這是為啥?(上述打包一切正常,已使用babel轉(zhuǎn)換,依賴引入的也是轉(zhuǎn)換后的es5代碼)求指教!

回答
編輯回答
瞄小懶

你的 a.jsb.js 怎么寫的?

你這種用法:import a from './a'
對(duì)應(yīng)的a.js 應(yīng)該有export defaut;

如果沒有 default,
應(yīng)該這樣用:import {a} from './a'

2018年3月8日 01:28
編輯回答
不歸路

得看你的 package.json

2018年5月27日 19:46
編輯回答
練命

這個(gè)問題查了會(huì)資料,就自問自答了,以供參考:
首先,webpack,默認(rèn)打包結(jié)構(gòu)是一個(gè)閉包,然后模塊是作為閉包的參數(shù)列表,是個(gè)數(shù)組,每一項(xiàng)也是個(gè)匿名函數(shù),具體參考鏈接

暴露出的對(duì)象,都在閉包中,應(yīng)該是導(dǎo)致拿不到值的根本原因(后續(xù)還需具體跟蹤?。?。

解決方案:
參考官方文檔:https://webpack.js.org/config...
有一個(gè)libraryTarget的屬性,作用是定義模塊運(yùn)行的方式,將它的值設(shè)為umd,則問題解決!

2018年5月8日 15:25
編輯回答
陌上花

需要看下你 a b js文件中有沒有export defaut.
最好看下你這兩個(gè)文件

2018年2月20日 15:17