Move index.js to web_src and use webpack to pack them (#8598)

* Move index.js to web_src and use webpack * Fix initHeatMap * update eslint and move webpack to devDependencies * update index.js * add eslint env node
2019-11-13 22:52:13 +08:00 · 2019-11-13 22:52:13 +08:00 · afe50873a5
parent 71395dffd0
commit afe50873a5
12 changed files with 4747 additions and 3793 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -10,6 +10,7 @@ env:
  browser: true
  jquery: true
  es6: true
+  node: true

 globals:
  Clipboard: false
--- a/3
+++ b/3
@ -434,7 +434,8 @@ npm-update: npm-check

 .PHONY: js
 js: npm
-	npx eslint public/js
+	npx eslint web_src/js webpack.config.js
+	npx webpack

 .PHONY: css
 css: npm
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -12,7 +12,9 @@
    "postcss-cli": "6.1.3",
    "stylelint": "10.1.0",
    "stylelint-config-standard": "18.3.0",
-    "updates": "8.5.3"
+    "updates": "8.5.3",
+    "webpack": "4.41.2",
+    "webpack-cli": "3.3.10"
  },
  "browserslist": [
    "> 1%",
--- a/public/js/index.js
+++ b/public/js/index.js
--- a/public/js/index.js.map
+++ b/public/js/index.js.map
--- a/templates/base/footer.tmpl
+++ b/templates/base/footer.tmpl
@ -129,7 +129,7 @@
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/moment/moment.min.js" charset="utf-8"></script>
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js" charset="utf-8"></script>
 	<script type="text/javascript">
-		initHeatmap('user-heatmap', '{{.HeatmapUser}}');
+		window.initHeatmap('user-heatmap', '{{.HeatmapUser}}');
 	</script>
 {{end}}
 {{template "custom/footer" .}}
--- a/templates/repo/diff/comment_form.tmpl
+++ b/templates/repo/diff/comment_form.tmpl
@ -39,7 +39,7 @@
 					{{end}}
 				{{end}}
 				{{if or (not $.HasComments) $.hidden}}
-					<button type="button" class="ui submit tiny basic button btn-cancel" onclick="cancelCodeComment(this);">{{$.root.i18n.Tr "cancel"}}</button>
+					<button type="button" class="ui submit tiny basic button btn-cancel" onclick="window.cancelCodeComment(this);">{{$.root.i18n.Tr "cancel"}}</button>
 				{{end}}
 			</div>
 		</div>
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@ -155,8 +155,8 @@
 						</form>
 						{{if  $.IsStopwatchRunning}}
 							<div class="ui buttons fluid stop-cancel">
-								<button onclick="this.disabled=true;toggleStopwatch()" class="ui button stop">{{.i18n.Tr "repo.issues.stop_tracking"}}</button>
-								<button onclick="this.disabled=true;cancelStopwatch()" class="ui negative button cancel">{{.i18n.Tr "repo.issues.cancel_tracking"}}</button>
+								<button onclick="this.disabled=true;window.toggleStopwatch()" class="ui button stop">{{.i18n.Tr "repo.issues.stop_tracking"}}</button>
+								<button onclick="this.disabled=true;window.cancelStopwatch()" class="ui negative button cancel">{{.i18n.Tr "repo.issues.cancel_tracking"}}</button>
 							</div>
 						{{else}}
 							{{if .HasUserStopwatch}}
@ -165,8 +165,8 @@
 								</div>
 							{{end}}
 							<div class="ui buttons two fluid start-add">
-								<button onclick="this.disabled=true;toggleStopwatch()" class="ui button poping up start" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
-								<button onclick="timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
+								<button onclick="this.disabled=true;window.toggleStopwatch()" class="ui button poping up start" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
+								<button onclick="window.timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
 								<div class="ui mini modal">
 									<div class="header">{{.i18n.Tr "repo.issues.add_time"}}</div>
 									<div class="content">
@ -225,7 +225,7 @@
 					{{end}}
 					{{if and .IsIssueWriter (not .Repository.IsArchived)}}
 						<br/>
-						<a style="cursor:pointer;" onclick="toggleDeadlineForm();"><i class="edit icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_edit"}}</a> -
+						<a style="cursor:pointer;" onclick="window.toggleDeadlineForm();"><i class="edit icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_edit"}}</a> -
 						<a style="cursor:pointer;" onclick="updateDeadline('');"><i class="remove icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_remove"}}</a>
 					{{end}}
 				</p>
@ -235,7 +235,7 @@

 			{{if and .IsIssueWriter (not .Repository.IsArchived)}}
 				<div {{if ne .Issue.DeadlineUnix 0}} style="display: none;"{{end}} id="deadlineForm">
-					<form class="ui fluid action input" action="{{AppSubUrl}}/api/v1/repos/{{.Repository.Owner.Name}}/{{.Repository.Name}}/issues/{{.Issue.Index}}" method="post" id="update-issue-deadline-form" onsubmit="setDeadline();return false;">
+					<form class="ui fluid action input" action="{{AppSubUrl}}/api/v1/repos/{{.Repository.Owner.Name}}/{{.Repository.Name}}/issues/{{.Issue.Index}}" method="post" id="update-issue-deadline-form" onsubmit="window.setDeadline();return false;">
 						{{$.CsrfTokenHtml}}
 						<input required placeholder="{{.i18n.Tr "repo.issues.due_date_form"}}" {{if gt .Issue.DeadlineUnix 0}}value="{{.Issue.DeadlineUnix.Format "2006-01-02"}}"{{end}} type="date" name="deadlineDate" id="deadlineDate">
 						<button class="ui green icon button">
@ -280,7 +280,7 @@
 								<div class="text small">{{.Repository.OwnerName}}/{{.Repository.Name}}</div>
 								<div class="ui transparent label right floated nopadding">
 									{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
-										<a class="delete-dependency-button" onclick="deleteDependencyModal({{.Issue.ID}}, 'blocking');"
+										<a class="delete-dependency-button" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blocking');"
 											data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 											<i class="delete icon text red nopadding nomargin"></i>
 										</a>
@ -307,7 +307,7 @@
 								<div class="text small">{{.Repository.OwnerName}}/{{.Repository.Name}}</div>
 								<div class="ui transparent label right floated nopadding">
 									{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
-										<a class="delete-dependency-button" onclick="deleteDependencyModal({{.Issue.ID}}, 'blockedBy');"
+										<a class="delete-dependency-button" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blockedBy');"
 											data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 											<i class="delete icon text red nopadding nomargin"></i>
 										</a>
--- a/templates/user/auth/signin_inner.tmpl
+++ b/templates/user/auth/signin_inner.tmpl
@ -65,7 +65,7 @@
 										title="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
 										class="{{$provider.Name}}"
 										src="{{AppSubUrl}}{{$provider.Image}}"
-										onclick="onOAuthLoginClick()"
+										onclick="window.onOAuthLoginClick()"
 									></a>
 							{{end}}
 						</div>
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,20 @@
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+  entry: {
+    index: './web_src/js/index.js',
+  },
+  devtool: 'source-map',
+  output: {
+    path: path.resolve(__dirname, 'public/js'),
+    filename: "[name].js"
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin({ 
+        sourceMap: true
+     })],
+  },
+};