我终于尝试将现代版本系统带到我的应用程序中，我希望有人可以提供帮助。我想我需要一些范例转换。
这就是我的应用程序的结构：
Mike现在我已经设置了这个：
<div class = "nameOfOrganization">
<label>2. Choose organization:</label>
<form>
<select name = "organizations" id="organizations" style="text-transform: uppercase; width: 312px;">
<option>organization 1</option>
<option>organization 2</option>
<option>organization 3</option>
</select>
</form>
<button type="button" onclick="getOrganizationName()">Add to document: </button>
<script>
function getOrganizationName () {
var x = document.getElementById("organizations");
var y = x.options[x.selectedIndex].text;
document.getElementById("organizationName").innerHTML = y;
getAttr(); // add a table with bigBoss, gap and sme
}
</script>
<script>
function getAttr() {
var bigBoss = 0 ;
var gap = 0;
var sme = 0;
var podpisi = document.createElement('table');
var tr = document.createElement('tr');
var td = document.createElement('td');
var position = document.createTextNode('Boss');
tr.appendChild(td);
td.appendChild(position);
var td1 = document.createElement('td');
var signature = document.createTextNode(" " + '_____________');
tr.appendChild(td1);
td1.appendChild(signature);
var td2 = document.createElement('td');
var bigBoss_surname_Name_MiddleName = document.createTextNode(bigBoss);
tr.appendChild(td2);
td2.appendChild(bigBoss_surname_Name_MiddleName);
podpisi.appendChild(tr);
podpisi.id="podpisi";
td.className = "td1";
td1.className = "td2";
td2.className = "td3";
var tr2 = document.createElement('tr');
var td2_1 = document.createElement('td');
var position1 = document.createTextNode('Кошторис перевірив');
tr2.appendChild(td2_1);
td2_1.appendChild(position1);
var td2_2 = document.createElement('td');
var signature1 = document.createTextNode(" " + '_____________');
tr2.appendChild(td2_2);
td2_2.appendChild(signature1);
var td2_3 = document.createElement('td');
var GAP_surname_Name_MiddleName = document.createTextNode(gap);
tr2.appendChild(td2_3);
td2_3.appendChild(GAP_surname_Name_MiddleName);
podpisi.appendChild(tr2);
td2_1.className = "td1";
td2_2.className = "td2";
td2_3.className = "td3";
var tr3 = document.createElement('tr');
var td3_1 = document.createElement('td');
var position2 = document.createTextNode('Кошторис cклав:');
tr3.appendChild(td3_1);
td3_1.appendChild(position2);
var td3_2 = document.createElement('td');
var signature2 = document.createTextNode(" " + '_____________');
tr3.appendChild(td3_2);
td3_2.appendChild(signature2);
var td3_3 = document.createElement('td');
var smetchik_surname_Name_MiddleName = document.createTextNode(sme);
tr3.appendChild(td3_3);
td3_3.appendChild(smetchik_surname_Name_MiddleName);
podpisi.appendChild(tr3);
td3_1.className = "td1";
td3_2.className = "td2";
td3_3.className = "td3";
以放置所有内容/src
/components
/Base
/App.jsx
/Pages.jsx
/...
/Page1
/Page1Component1.jsx
/Page1Component2.jsx
/...
/Page2
/Page2Component1.jsx
/Page2Component2.jsx
/...
/...
/libs
/bootstrap.js
/jquery.js
/react.js
/...
/scripts
/index.js
/utils.js
/styles
/main.css
/html
/index.html
中的所有内容，将其命名为/dest，将其放入目标/scripts中的所有内容，将其命名为main.js，将其放入目标/libs中的所有内容，通过babel运行，将其命名为libs.js，将其放入目标/components文件和一个comps.js文件复制到dest 然后是应用程序的运行方式：
/html /styles index.html请求main.js和main.js 但这是我遇到的问题：这里有很多东西依赖于其他全球性的东西。 libs.js等待comps.js和{{ 1}}加载，然后调用index.js，这意味着ReactDOM和App都需要是全局的。
现在我尝试添加需要comps.js的内容，并尝试使用Browserify。但是Browserify采用了需要的代码并将其包装起来，我相信这样做会使没有全局。
我意识到我需要将我的应用程序转换为实际的模块，而不仅仅是一堆连接并相互调用的文件。我知道从长远来看，避免全局变量将是一件好事。但是我很难搞清楚如何。
例如，我有> 50个React模块。将libs.js添加到其中的每一个，然后将它们全部导入主文件似乎是错误的。此外，ReactDOM.render(<App />...)中的某些内容是不作为模块导出的库，它们会在require()标记中运行，例如Google Charts。
所以我想我的问题是：
谢谢，对这个漫无边际的问题感到抱歉。
答案 0 :(得分：1)
首先，您的文件结构没有任何问题。
其次，你能做的最好的事情就是遵循＆＃34;一个模块，一个文件＆＃34;规则。这意味着向每个文件添加module.exports或export default。这只是一个很好的JavaScript。但它并不意味着将它们全部导入您的主文件，这将我们带到：
第三，思考模块化。文件应该require或import正是他们需要的东西，而不是他们不需要的东西。例如，如果您的App使用Page1而Page1使用Page1Component1，那么您的导入应该如何运作：
App -> Page1 -> Page1Component1
-> Page1Component2
-> Page2 -> Page2Component1
-> ...
这确保了关注点的分离，并保护您的代码免受以后易于触发的错误（如嵌套依赖项更改中的错误）。你的构建系统应该生成一个文件（但你可以稍后解决性能如果需要与分块等等。）
并且你要纠正的是，在这种结构中，使用Browserify或Webpack将确保没有任何东西是全局性的 - 这是一件好事（尽管我会注意到你可以明确告诉他们暴露组件，这有时是图书馆所必需的。
这使您无法控制的图书馆无法导入。这不适用于Bootstrap，jQuery或React，它们都具有来自NPM的require个模块。但假设您有一个图书馆但您没有提及NPM无法提供，您仍然可以使用script标记将其全局添加到您的HTML中并告诉Browserify或{{3}暴露它需要。