javascript - 汇总，多个文件，多个文件中的相同常量名称：浏览器中的错误：未捕获的语法错误：标识符“o”已被声明

Question

我有个问题。

解释

在我在 /one 页面上导航的网站中，one.js文件中的代码执行良好。

过了一会儿，我在两个.js 文件中插入页面（ pjax，ajax：无论如何）第二个代码。

浏览器抱怨此错误：

Uncaught SyntaxError: Identifier 'o' has already been declared
- at two.js:1

复制和源代码

1. rollup.config.js：

   import resolve from 'rollup-plugin-node-resolve'
   import commonjs from 'rollup-plugin-commonjs'
   import { terser } from 'rollup-plugin-terser'
   import multiInput from 'rollup-plugin-multi-input'
   
   export default {
     input: ['src/**/*.js'],
     output: {
       format: 'esm',
       dir: 'dist/js'
     },
     plugins: [
       multiInput({ relative: 'src' }),
       resolve({ browser: true }),
       commonjs(),
       terser()
     ]
   }
   

2. src/one.js：

   const names1 = ['john1', 'carl1', 'bob1']
   names1.forEach(name1 => {
     console.log('name1:', name1, ', in names1:', ...names1)
   })
   

3. src/two.js：

   const names2 = ['john2', 'carl2', 'bob2']
   names2.forEach(name2 => {
     console.log('name2:', name2, ', in names2:', ...names2)
   })
   

4. dist/js/one.js：

   const o=["john1","carl1","bob1"];o.forEach(n=>{console.log("name1:",n,", in names1:",...o)});
   

5. dist/js/two.js：

   const o=["john2","carl2","bob2"];o.forEach(n=>{console.log("name2:",n,", in names2:",...o)});
   

问题

如何解决这个问题？

我们可以根据文件名“前缀”常量名吗？

当然，如果我将所有内容都放在一个.js文件中，它可以工作，但由于项目的结构，这是不可能的。

Answer 1

您选择了output.format: 'esm'，这使得 Rollup 假定代码位于它们自己的模块范围内。如果您将它们插入到您的页面中

 <script type="module" src="/dist/js/one.js"></script>
 <script type="module" src="/dist/js/two.js"></script>

我希望他们能工作。如果您不想使用type="module"，则为 Rollup 使用不同的输出格式，它将它们包装在模块模式（或 IIFE）中，以赋予它们自己的范围。