javascript - 汇总,多个文件,多个文件中的相同常量名称:浏览器中的错误:未捕获的语法错误:标识符“o”已被声明
问题描述
我有个问题。
解释
在我在 /one 页面上导航的网站中,one.js文件中的代码执行良好。
过了一会儿,我在两个.js 文件中插入页面( pjax,ajax:无论如何)第二个代码。
浏览器抱怨此错误:
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)});
问题
如何解决这个问题?
我们可以根据文件名“前缀”常量名吗?
当然,如果我将所有内容都放在一个.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)中,以赋予它们自己的范围。
推荐阅读
- python - 如何在请求 python 中调用 post api?
- android - 如何制作具有四个象限和中间一个圆圈的 android 布局
- sql - 为 SQL 表中的每个部门插入两个具有唯一 ID 和值的新行
- javascript - 使用 React Native 创建 apk 的问题
- react-native - 使用 react-native 在 Firebase 实时数据库中插入数据
- perl - Dancer2::Plugin::Redis 中“重试”和“每个”配置参数的意义是什么
- angular - 自动选择单选按钮不触发路由
- python - JupyterLab:如何使用键盘快捷键清除当前单元格的输出?
- visual-studio-code - 使用 VS Code 时如何解决 Rust 中的“未解析导入”?
- java - 从文件中替换字符串中的确切字符?