Rollup, multiple files, same constants name in multiple files: error in browser: Uncaught SyntaxError: Identifier 'o' has already been declared
Rollup, multiple files, same constants name in multiple files: error in browser: Uncaught SyntaxError: Identifier 'o' has already been declared
我有问题。
解释
在我浏览页面 /one 的网站中,one.js 文件中的代码执行正常。
过了一会儿,我在页面中插入(pjax,ajax:无论如何)two.js文件中的第二个代码。
浏览器报错:
Uncaught SyntaxError: Identifier 'o' has already been declared
- at two.js: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()
]
}
src/one.js:
const names1 = ['john1', 'carl1', 'bob1']
names1.forEach(name1 => {
console.log('name1:', name1, ', in names1:', ...names1)
})
src/two.js:
const names2 = ['john2', 'carl2', 'bob2']
names2.forEach(name2 => {
console.log('name2:', name2, ', in names2:', ...names2)
})
dist/js/one.js:
const o=["john1","carl1","bob1"];o.forEach(n=>{console.log("name1:",n,", in names1:",...o)});
dist/js/two.js:
const o=["john2","carl2","bob2"];o.forEach(n=>{console.log("name2:",n,", in names2:",...o)});
问题
如何解决这个问题?
我们可以 "prefix" 基于文件名的常量名称吗?
当然,如果我将所有内容都放在 one.js 文件中,它可以工作,但由于项目的结构,这是不可能的。
你选择了 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)中,给它们自己的范围。
我有问题。
解释
在我浏览页面 /one 的网站中,one.js 文件中的代码执行正常。
过了一会儿,我在页面中插入(pjax,ajax:无论如何)two.js文件中的第二个代码。
浏览器报错:
Uncaught SyntaxError: Identifier 'o' has already been declared
- at two.js: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() ] }
src/one.js:
const names1 = ['john1', 'carl1', 'bob1'] names1.forEach(name1 => { console.log('name1:', name1, ', in names1:', ...names1) })
src/two.js:
const names2 = ['john2', 'carl2', 'bob2'] names2.forEach(name2 => { console.log('name2:', name2, ', in names2:', ...names2) })
dist/js/one.js:
const o=["john1","carl1","bob1"];o.forEach(n=>{console.log("name1:",n,", in names1:",...o)});
dist/js/two.js:
const o=["john2","carl2","bob2"];o.forEach(n=>{console.log("name2:",n,", in names2:",...o)});
问题
如何解决这个问题?
我们可以 "prefix" 基于文件名的常量名称吗?
当然,如果我将所有内容都放在 one.js 文件中,它可以工作,但由于项目的结构,这是不可能的。
你选择了 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)中,给它们自己的范围。