[refactor] we cannot import files directly anymore if we want to embrace pure es6 import syntax

[tyn1998]

Description

A few months ago

"keep_fnames: ture" option is for a really-hard-to-detect problem:

As we know, webpack will try its best to minimize the bundles size in build mode and one of its weapons is to substitute long variable names with short ones. Each module share a common name transformation rule because each module has its own name space when imported properly.

The problem in our code is, we import files directly by import './xxx', this makes 6 transformed t to be exposed in same name space and then they conflict.

So keep founction names when building bundles.

Originally posted by @tyn1998 in #274 (comment)

Today

I'm working on #381 today, and I find:

• build produced by yarn run start works well
• build produced by yarn run build fails to make contentscripts work, but Popup and Options work well

Finally I recall the 't' problem which I found a few months before and disable all import './xxx' but import ./PerceptorTab:

Then PerceptorTab shows up:

Solution

This problem is related to:

• [Summer2022/OSPP-Project01] Design AVC Strategy and Refactor Code in AVC way #347 (@wxharry )

So I think the refactoring work should be paused for a while until #347 comes up.

[tyn1998]

Forgot to remove this：

This issue will be closed after this webpack option is removed.

[tyn1998]

Well, I found that no matter importing classes by files or modules their constructor.name will always be 't' if having keep_fnames not being true in production mode. (also refer to this)

So just keep the option enabled if we still use the current inject2Perceptor mechanism.

[tyn1998]

• build produced by yarn run build fails to make contentscripts work, but Popup and Options work well

破案了！

The terserOptions.keep_fnames seemed not work and actually it didn't work because process.env.BABEL_ENV was not set to 'production' as we expected.

The problem was introduced by the transformation from commonjs modules to es6 modules. The code above worked well in require syntax but not in import syntax.