├── .gitignore
├── package.json
├── README.md
└── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /yarn.lock
3 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "umi-plugin-ecma5-validator",
 3 |   "version": "0.1.0",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "https://github.com/umijs/umi-plugin-ecma5-validator"
 7 |   },
 8 |   "homepage": "https://github.com/umijs/umi-plugin-ecma5-validator",
 9 |   "authors": [
10 |     "chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"
11 |   ],
12 |   "bugs": {
13 |     "url": "https://github.com/umijs/umi-plugin-ecma5-validator/issues"
14 |   },
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "@babel/code-frame": "^7.0.0",
18 |     "acorn": "^5.7.2",
19 |     "chalk": "^2.4.1"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # umi-plugin-ecma5-validator
 2 | 
 3 | Ecmascript 5 syntax validator plugin for umi.
 4 | 
 5 | ## Usage
 6 | 
 7 | Install via yarn or npm.
 8 | 
 9 | ```bash
10 | $ yarn add umi-plugin-react
11 | ```
12 | 
13 | Configure it in the `.umirc.js`.
14 | 
15 | ```js
16 | export default {
17 |   plugins: [
18 |     ['umi-plugin-ecma5-validator', option],
19 |   ],
20 | };
21 | ```
22 | 
23 | ## Option
24 | 
25 | ### option.codeFrame
26 | 
27 | Specify the option for [@babel/code-frame](https://babeljs.io/docs/en/next/babel-code-frame#options).
28 | 
29 | ### option.acorn
30 | 
31 | Specify the option for [acorn](https://github.com/acornjs/acorn).
32 | 
33 | ## Pictures
34 | 
35 | In browser,
36 | 
37 | <img src="https://gw.alipayobjects.com/zos/rmsportal/UKOCnQFrJIFXejHDbeMc.png" width="638" />
38 | 
39 | In command,
40 | 
41 | <img src="https://gw.alipayobjects.com/zos/rmsportal/gGGbCONYdUVZNgvWEhWT.png" width="810" />
42 | 
43 | In command without compress,
44 | 
45 | <img src="https://gw.alipayobjects.com/zos/rmsportal/FRsefIYiXqUQaFnWnMCl.png" width="541" />
46 | 
47 | ## Why this package exist?
48 | 
49 | To avoid cases like these,
50 | 
51 | <img src="https://gw.alipayobjects.com/zos/rmsportal/hnhsKMQPjxChymfDETUT.png" width="1246" />
52 | 
53 | ## LICENSE
54 | 
55 | MIT
56 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const { extname } = require('path');
 2 | const acorn = require('acorn');
 3 | const chalk = require('chalk');
 4 | const { codeFrameColumns } = require('@babel/code-frame');
 5 | 
 6 | module.exports = function (api, opts = {}) {
 7 |   const { debug } = api;
 8 | 
 9 |   class ES5Validator {
10 |     apply(compiler) {
11 |       compiler.hooks.afterEmit.tap('ES5Validator', compilation => {
12 |         const fileNames = Object.keys(compilation.assets);
13 |         debug(`got files: ${fileNames.join(', ')}`);
14 |         fileNames.forEach((fileName) => {
15 |           if (extname(fileName) === '.js') {
16 |             debug(`validate es5 for ${fileName}`);
17 |             const asset = compilation.assets[fileName];
18 |             const source = asset.source();
19 | 
20 |             try {
21 |               acorn.parse(source, {
22 |                 ecmaVersion: 5,
23 |                 ...(opts.acorn || {}),
24 |               });
25 |               debug(`parse success ${fileName}`);
26 |             } catch (e) {
27 |               debug(`parse failed ${fileName}`);
28 |               const errMsg = [
29 |                 chalk.red(`Error: ECMAScript 5 validate failed when parsing ${chalk.green.bold(fileName)} (${e.loc.line}, ${e.loc.column})`),
30 |               ];
31 |               if (e.loc.line === 1 && process.env.NODE_ENV === 'production' && process.env.COMPRESS !== 'none') {
32 |                 errMsg.push('');
33 |                 errMsg.push(`It's hard to locate the problem when code if compressed, try to disable compression and run again.`);
34 |                 errMsg.push('');
35 |                 errMsg.push(`   COMPRESS=none umi build`);
36 |               } else {
37 |                 errMsg.push('');
38 |                 errMsg.push(codeFrameColumns(source, {
39 |                   start: e.loc,
40 |                 }, {
41 |                   highlightCode: true,
42 |                   forceColor: true,
43 |                   message: 'Invalid ECMAScript 5 syntax',
44 |                   linesAbove: 10,
45 |                   linesBelow: 2,
46 |                   ...(opts.codeFrame || {}),
47 |                 }));
48 |               }
49 |               errMsg.push('');
50 |               errMsg.push(chalk.cyan(`Please submit a PR for the problematic package at https://github.com/umijs/es5-imcompatible-versions`));
51 |               compilation.errors.push(
52 |                 new Error(errMsg.join('\n')),
53 |               );
54 |             }
55 |           }
56 |         });
57 |       });
58 |     }
59 |   }
60 | 
61 |   api.chainWebpackConfig((webpackConfig) => {
62 |     webpackConfig
63 |       .plugin('ecma5-validate')
64 |       .use(ES5Validator);
65 |   })
66 | };
67 | 


--------------------------------------------------------------------------------