コンパイル不能になっていた環境を整備

ビルド環境を最新化(webpack 3→4, babel 6→7等)

Author: ics-ikeda

html-build/package-lock.json

@@ -9,19 +9,20 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "autoprefixer": "^8.0.0",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
-    "css-loader": "^0.28.9",
-    "cssnano": "^3.10.0",
-    "node-sass": "^4.7.2",
-    "postcss-loader": "^2.1.0",
-    "prettier": "^1.10.2",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.20.2",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.11.0"
+    "autoprefixer": "^9.4.4",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.0",
+    "cssnano": "^4.1.8",
+    "node-sass": "^4.11.0",
+    "postcss-loader": "^3.0.0",
+    "prettier": "^1.15.3",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.28.3",
+    "webpack-cli": "^3.2.1"
   },
   "dependencies": {
     "jquery": "^3.3.1",

html-build/package.json

@@ -1,5 +1,5 @@
 .theme-dark {
-  .hljs {
+  .language-js {
     display: block;
     overflow-x: auto;
     padding: 0.5em;

html-build/src/style/highlight.js/atom-one-dark.scss

@@ -1,6 +1,6 @@
 
 .theme-light {
-  .hljs {
+  .language-js {
     display: block;
     overflow-x: auto;
     padding: 0.5em;

html-build/src/style/highlight.js/atom-one-light.scss

@@ -1,14 +1,12 @@
-const webpack = require('webpack');
-
 const isProduction = true;
-const useOptimize = isProduction;
 const useSourceMap = !isProduction;
 
 module.exports = {
+  mode: isProduction ? 'production' : 'development',
   entry: './src/main.js',
   output: { // ファイルの出力設定
     path: `${__dirname}/../html/js`,  //  出力ファイルのディレクトリ名
-    filename: 'bundle.js'  // 出力ファイル名
+    filename: 'bundle.js',  // 出力ファイル名
   },
   module: {
     rules: [
@@ -22,13 +20,11 @@ module.exports = {
             // Babel のオプションを指定する
             options: {
               presets: [
-                // env を指定することで、ES2017 を ES5 に変換。
-                // {modules: false}にしないと import 文が Babel によって CommonJS に変換され、
-                // webpack の Tree Shaking 機能が使えない
-                ['env', {'modules': false}]
-              ]
-            }
-          }
+                // プリセットを指定することで、ES2018 を ES5 に変換
+                '@babel/preset-env',
+              ],
+            },
+          },
         ],
         // node_modules は除外する
         exclude: /node_modules/,
@@ -46,7 +42,7 @@ module.exports = {
               url: true,
               // ソースマップを有効にする
               sourceMap: useSourceMap,
-              importLoaders: 2
+              importLoaders: 2,
             },
           },
           {
@@ -62,27 +58,13 @@ module.exports = {
       // 画像関係
       {
         test: /\.(png|jpeg|svg)$/,
-        use: 'url-loader'
+        use: 'url-loader',
       },
       // フォント関係
       {
         test: /\.(otf|eot|svg|ttf|woff|woff2)(\?.+)?$/,
-        use: 'url-loader'
-      }
+        use: 'url-loader',
+      },
     ],
   },
-  plugins: useOptimize === true ? [
-    // 【効果：中】Scope Hoistingをするためのプラグイン
-    new webpack.optimize.ModuleConcatenationPlugin(),
-
-    // 【効果：大】JSファイルのminifyを実行する
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: useSourceMap,
-      compress: {
-        warnings: false,
-      },
-      // マルチプロセスで高速化
-      parallel: true,
-    }),
-  ] : []
 };

html-build/webpack.config.js

@@ -7,7 +7,7 @@ const htmlMinifier = require('html-minifier');
 let promises = [];
 let samplesUrl = 'https://ics-creative.github.io/tutorial-three/';
 let samplesHtmlUrl = 'https://github.com/ics-creative/tutorial-three/blob/master/';
-let templateHtml;
+const templateHtml = fs.readFileSync('./template-html.html', 'utf8');
 
 /**
  * テンプレート文字列を展開
@@ -100,7 +100,8 @@ const generateHTML = (dirName, fileName, resolve) => {
     // --------------------------------
     // メタデータの選定
     // --------------------------------
-    const articleAuthorArr = articleMarkdown.match(/<p><article-author>(.*?)<\/article-author><\/p>/);
+
+    const articleAuthorArr = articleMarkdown.match(/<article-author>(.*?)<\/article-author>/);
     const articleAuthorStr = articleAuthorArr ? articleAuthorArr[1] : '';
     if (!articleAuthorArr) {
       console.error(`<article-author> Element is not written. : ${fileName}`);
@@ -153,7 +154,7 @@ const generateHTML = (dirName, fileName, resolve) => {
       'url': url
     };
     if (!templateHtml) {
-      console.log(fileName + ' generate error!');
+      console.error(fileName + ' generate error! templateHtml is empty.');
       return;
     }
 
@@ -192,12 +193,7 @@ fs.readdir('../docs', (err, files) => {
       }
     });
   }));
-  promises.push(new Promise((resolve) => {
-    fs.readFile('template-html.html', 'utf8', (error, text) => {
-      templateHtml = text;
-      resolve();
-    });
-  }));
+
   for (let i = 0; i < files.length; i++) {
     const filename = files[i];
     const childPromise = new Promise((resolve) => {

html/js/bundle.js

@@ -3,9 +3,9 @@
     "build": "node index.js"
   },
   "devDependencies": {
-    "highlight.js": "^9.12.0",
-    "html-minifier": "^3.5.9",
-    "marked": "^0.3.16",
+    "highlight.js": "^9.13.1",
+    "html-minifier": "^3.5.21",
+    "marked": "^0.6.0",
     "mkdirp": "^0.5.1"
   },
   "dependencies": {},

tool-generate-htmls/index.js

@@ -26,7 +26,7 @@
   <meta name="date" content="${article-dateModified}T00:00:00+09:00"/>
 
   <link rel="icon" sizes="16x16 32x32 48x48 128x128 256x256" href="https://ics.media/wp-content/themes/icslab/img/favicon.ico"/>
-  <script src="js/bundle.js?v=2018-02-23_b"></script>
+  <script src="js/bundle.js?v=2019-01-08_01"></script>
 </head>
 <body class="tutorial theme-light">