script: optimize import

bolucat · Dec 18, 2019 · 175cfc2 · 175cfc2
1 parent ab73178
commit 175cfc2
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 150 deletions.
diff --git a/build/remove-evals.js b/build/remove-evals.js
@@ -5,54 +5,54 @@ const fs = require('fs');
 
 const BUNDLE_DIR = path.join(__dirname, '../dist');
 const bundles = [
-	// 'background.js',
-	// 'popup.js',
-	'options.js',
+  'background.js',
+  'popup.js',
+  'options.js',
 ];
 
 const regex = /\neval\("(.*?)"\)/g;
 
 const removeEvals = (file) => {
-	console.info(`Removing eval() from ${file}`);
-
-	return new Promise((resolve, reject) => {
-		fs.readFile(file, 'utf8', (err, data) => {
-			if(err) {
-				reject(err);
-				return;
-			}
-
-			if(!regex.test(data)) {
-				reject(`No CSP specific code found in ${file}.`);
-				return;
-			}
-
-			data.replace(regex, (match, s1) => {
-				let res = s1;
-				res = res.replace(/\\n/g, "\n");
-				res = res.replace(/\\r/g, "");
-				res = res.replace(/\\"/g, '"');
-				return res;
-			})
-
-			fs.writeFile(file, data, (err) => {
-				if(err) {
-					reject(err);
-					return;
-				}
-
-				resolve();
-			});
-		});
-	});
+  console.info(`Removing eval() from ${file}`);
+
+  return new Promise((resolve, reject) => {
+    fs.readFile(file, 'utf8', (err, data) => {
+      if(err) {
+        reject(err);
+        return;
+      }
+
+      if(!regex.test(data)) {
+        reject(`No CSP specific code found in ${file}.`);
+        return;
+      }
+
+      data.replace(regex, (match, s1) => {
+        let res = s1;
+        res = res.replace(/\\n/g, "\n");
+        res = res.replace(/\\r/g, "");
+        res = res.replace(/\\"/g, '"');
+        return res;
+      })
+
+      fs.writeFile(file, data, (err) => {
+        if(err) {
+          reject(err);
+          return;
+        }
+
+        resolve();
+      });
+    });
+  });
 };
 
 const main = () => {
-	bundles.forEach(bundle => {
-		removeEvals(path.join(BUNDLE_DIR, bundle))
-			.then(() => console.info(`Bundle ${bundle}: OK`))
-			.catch(console.error);
-	});
+  bundles.forEach(bundle => {
+    removeEvals(path.join(BUNDLE_DIR, bundle))
+      .then(() => console.info(`Bundle ${bundle}: OK`))
+      .catch(console.error);
+  });
 };
 
 main();
diff --git a/build/webpack/entry.js b/build/webpack/entry.js
@@ -2,48 +2,61 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const entry = [
-	{ name: "options", html: true },
-	// { name: "popup", html: true },
-	// { name: "background", html: false },
+  { name: "options", html: true },
+  { name: "popup", html: true },
+  { name: "background", html: false },
 ]
 
 module.exports = function(root, config) {
-	if (config.plugins && Array.isArray(config.plugins)) {
-		let hasHtml = false;
-		for (const k in config.plugins) {
-			const it = config.plugins[k];
-			if (typeof (it) === 'object' && it.__proto__.constructor.name === 'HtmlWebpackPlugin') {
-				hasHtml = true;
-				config.plugins.splice(k, 1);
-				break;
-			}
-		}
-		if (hasHtml) {
-			entry.forEach(it => {
-				if (it.html) {
-					config.plugins.push(new HtmlWebpackPlugin({
-						inject: true,
-						chunks: [it.name],
-						template: path.resolve(root, 'src', it.name, 'index.html'),
-						filename: it.name + ".html"
-					}));
-				}
-			});
-		}
-	}
-	if (config.entry) {
-		config.entry = {};
-		entry.forEach(it => config.entry[it.name] = path.resolve(root, 'src', it.name, 'entry.ts'));
-	}
-	if (config.module && config.module.rules) {
-		for (const it of config.module.rules) {
-			if (it.loader === "babel-loader") {
-				it.options.plugins.push(['babel-plugin-import', {
-					libraryName: '@alifd/next',
-					style: true
-				}]);
-				break;
-			}
-		}
-	}
+  if (config.plugins && Array.isArray(config.plugins)) {
+    let hasHtml = false;
+    for (const k in config.plugins) {
+      const it = config.plugins[k];
+      if (typeof (it) === 'object' && it.__proto__.constructor.name === 'HtmlWebpackPlugin') {
+        hasHtml = true;
+        config.plugins.splice(k, 1);
+        break;
+      }
+    }
+    if (hasHtml) {
+      entry.forEach(it => {
+        if (it.html) {
+          config.plugins.push(new HtmlWebpackPlugin({
+            inject: true,
+            chunks: [it.name],
+            template: path.resolve(root, 'src', it.name, 'index.html'),
+            filename: it.name + ".html"
+          }));
+        }
+      });
+    }
+  }
+  if (config.entry) {
+    config.entry = {};
+    entry.forEach(it => config.entry[it.name] = path.resolve(root, 'src', it.name, 'entry.ts'));
+  }
+  // 按需加载
+  if (config.module && config.module.rules) {
+    const babelPluginImport = ['babel-plugin-import', {
+      libraryName: '@alifd/next',
+      style: false,
+      libraryDirectory: 'es',
+    }, '@alifd/next']
+    for (const it of config.module.rules) {
+      if (it.loader && it.loader === "babel-loader") {
+        it.options.plugins.push(babelPluginImport);
+      }
+      if (it.use) {
+        it.use.forEach(iit => {
+          if (iit.loader && iit.loader === "babel-loader") {
+            iit.options.plugins.push(babelPluginImport);
+          }
+        });
+      }
+    }
+  }
+  // 指定root目录
+  if (config.resolve) {
+    config.resolve.modules.push(path.resolve(root, 'src'));
+  }
 }
diff --git a/build/webpack/externals.js b/build/webpack/externals.js
@@ -2,45 +2,54 @@ const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const copy = [
-	{
-		"from": "./node_modules/react/umd/react.production.min.js",
-		"to": "external/react.min.js"
-	},
-	{
-		"from": "./node_modules/react-dom/umd/react-dom.production.min.js",
-		"to": "external/react-dom.min.js"
-	},
-	{
-		"from": "./src/public",
-		"to": "assets"
-	}
+  {
+    "from": "./node_modules/react/umd/react.production.min.js",
+    "to": "external/react.min.js"
+  },
+  {
+    "from": "./node_modules/react-dom/umd/react-dom.production.min.js",
+    "to": "external/react-dom.min.js"
+  },
+  {
+    "from": "./node_modules/moment/min/moment.min.js",
+    "to": "external/moment.min.js"
+  },
+  {
+    "from": "./node_modules/@alifd/next/dist/next.min.css",
+    "to": "external/next.min.css"
+  },
+  {
+    "from": "./src/public",
+    "to": "assets"
+  }
 ];
 
 module.exports = function(root, config) {
-	const { version } = require(path.resolve(root, 'package.json'));
-	if (typeof (config.externals) === "undefined") {
-		config.externals = {};
-	}
-	config.externals['react'] = 'window.React';
-	config.externals['react-dom'] = 'window.ReactDOM';
-	// 复制externals和静态文件
-	if (config.plugins && Array.isArray(config.plugins)) {
-		config.plugins.push(new CopyWebpackPlugin([
-			...copy,
-			{
-				from: './src/manifest.json',
-				to: 'manifest.json',
-				transform: (content) => {
-					const jsonContent = JSON.parse(content);
-					jsonContent.version = version;
+  const { version } = require(path.resolve(root, 'package.json'));
+  if (typeof (config.externals) === "undefined") {
+    config.externals = {};
+  }
+  config.externals['react'] = 'window.React';
+  config.externals['react-dom'] = 'window.ReactDOM';
+  config.externals['moment'] = 'window.moment';
+  // 复制externals和静态文件
+  if (config.plugins && Array.isArray(config.plugins)) {
+    config.plugins.push(new CopyWebpackPlugin([
+      ...copy,
+      {
+        from: './src/manifest.json',
+        to: 'manifest.json',
+        transform: (content) => {
+          const jsonContent = JSON.parse(content);
+          jsonContent.version = version;
 
-					if (config.mode === 'development') {
-						jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
-					}
+          if (config.mode === 'development') {
+            jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
+          }
 
-					return JSON.stringify(jsonContent);
-				},
-			},
-		]));
-	}
+          return JSON.stringify(jsonContent);
+        },
+      },
+    ]));
+  }
 }
diff --git a/src/background/entry.ts b/src/background/entry.ts
@@ -0,0 +1 @@
+console.log('success');
diff --git a/src/manifest.json b/src/manifest.json
@@ -27,11 +27,11 @@
 			"128": "assets/images/128.png"
 		},
 		"default_title": "__MSG_extButtonTitle__",
-		"default_popup": "popup/popup.html"
+		"default_popup": "popup.html"
 	},
 	"default_locale": "en",
 	"options_ui": {
-		"page": "options/options.html",
+		"page": "options.html",
 		"open_in_tab": true
 	}
 }
diff --git a/src/options/index.html b/src/options/index.html
@@ -9,5 +9,8 @@
 </head>
 <body>
 	<div id="app"></div>
+	<script src="./external/moment.min.js"></script>
+	<script src="./external/react.min.js"></script>
+	<script src="./external/react-dom.min.js"></script>
 </body>
 </html>
diff --git a/src/options/index.tsx b/src/options/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Nav } from '@alifd/next';
-import { t } from 'src/core/utils';
+import { t } from 'core/utils';
 
 export default () => {
   return (

diff --git a/src/options/options.html b/src/options/options.html
diff --git a/src/popup/entry.ts b/src/popup/entry.ts
@@ -0,0 +1 @@
+console.log('success');
diff --git a/src/popup/index.html b/src/popup/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Header Editor</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="icon" href="/assets/images/128.png">
+	<link rel="shortcut icon" href="/assets/images/128.png">
+</head>
+<body>
+	<div id="app"></div>
+	<script src="./external/react.min.js"></script>
+	<script src="./external/react-dom.min.js"></script>
+</body>
+</html>