ES6和Webpack：导入无效

Question

I'm currently learning ES6 & Webpack, and I've have a particular set of files that the import statement just won't work on. Here's the problem:

Sagas.js

import { deleteMe } from './DeleteMe';
import * as constants from '../Constants';

debugger;

DeleteMe.js

export const deleteMe = "Yep, it's loading";
console.log(deleteMe);

In the above file, deleteMe is not accessible from debugger (with Chrome Inspector). constants is.

And Constants.js

export const SET_COMMENTS = 'SET_COMMENTS';

Before debugger halts (in Chrome inspector), the "Yep, it's loading" does fire in the console, so the file itself is coming through.

I've tried:

• import * as deleteMeStuff from ./DeleteMe to see if deleteMeStuff would populate. It doesn't
• Restarting webpack-dev-server. No dice, no errors on compile. Throwing a debugger in ./DeleteMe confirms changes are coming through.
• const deleteMe = "Yep, it's working"; export default deleteMe const deleteMe = "Yep, it's working"; export default deleteMe & import deleteMe from './DeleteMe' --> still no joy

At the debugger, I've just noticed _DeleteMe returns {deleteMe: "Yep, it's loading", __esModule: true}

Any idea what's going on here & how to fix it? I'm thoroughly confused. There are a ton of other import files working successfully in other files across my app.

Answer 1

You can't use default and const in same line like

export default const deleteMe = "Yep, it's working"

You have to break it like:

export const deleteMe = "Yep, it's loading";
export default deleteMe;

and to import it you can do any one of following:

import deleteMe  from './DeleteMe';

or

import  { deleteMe }  from './DeleteMe';