feat: add babel-loader

zyao89 · zyao89 · commit a244b5d613e7 · 2020-03-11T02:35:54.000+08:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,10 @@
+{
+    // "presets": [
+    //     [
+    //         "@babel/preset-env",
+    //         {
+    //             "useBuiltIns": "entry"
+    //         }
+    //     ]
+    // ]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -7,7 +7,4 @@ module.exports = {
     extends: [
         "eslint-config-2o3t"
     ],
-    parserOptions: {
-        parser: "babel-eslint"
-    },
 }
diff --git a/microapp/config/index.js b/microapp/config/index.js
@@ -18,7 +18,7 @@ const config = {
         {
             filename: 'index.html',
             hash: true,
-            chunks: [ 'common', 'main' ],
+            chunks: [ 'main' ],
             template: './simple/client/index.html',
         },
     ],
diff --git a/package.json b/package.json
@@ -50,21 +50,21 @@
         }
     },
     "peerDependencies": {
-        "@micro-app/cli": ">=0.3.1"
+        "@micro-app/cli": ">=0.3.3"
     },
     "devDependencies": {
-        "@micro-app/cli": "^0.3.2",
+        "@babel/preset-env": "^7.8.7",
+        "@micro-app/cli": "^0.3.3",
         "@micro-app/plugin-compatible": "0.0.2",
         "@micro-app/plugin-deploy": "^0.0.4",
         "@types/jest": "^24.9.1",
-        "babel-eslint": "^10.1.0",
-        "eslint": "^5.16.0",
-        "eslint-config-2o3t": "^1.1.17",
+        "eslint-config-2o3t": "^2.0.1",
         "html-webpack-plugin": "^3.2.0",
         "husky": "^3.1.0",
         "jest": "^24.9.0",
-        "webpack": "^4.41.1",
-        "webpack-dev-server": "^3.9.0"
+        "vue": "^2.6.11",
+        "webpack": "^4.42.0",
+        "webpack-dev-server": "^3.10.3"
     },
     "dependencies": {
         "@intervolga/optimize-cssnano-plugin": "^1.0.6",
@@ -73,6 +73,7 @@
         "@soda/friendly-errors-webpack-plugin": "^1.7.1",
         "address": "^1.1.2",
         "autoprefixer": "^9.7.4",
+        "babel-loader": "^8.0.6",
         "cache-loader": "^4.1.0",
         "case-sensitive-paths-webpack-plugin": "^2.3.0",
         "cli-highlight": "^2.1.4",
diff --git a/simple/client/.eslintrc.js b/simple/client/.eslintrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+    root: true,
+    env: {
+        browser: true,
+    },
+    extends: [
+        "eslint-config-2o3t/vue"
+    ],
+}
diff --git a/simple/client/a.png b/simple/client/a.png
diff --git a/simple/client/api.js b/simple/client/api.js
diff --git a/simple/client/index.html b/simple/client/index.html
@@ -1,12 +1,19 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
+
 <body>
-    <div id="app"></div>
+    Test
+    <div id="app">
+        {{ message }}
+        <button @click="handleClick">Submit</button>
+    </div>
 </body>
+
 </html>
diff --git a/simple/client/main.js b/simple/client/main.js
@@ -1,7 +1,24 @@
-'use strict';
-// do something
+import Vue from 'vue/dist/vue.esm.js';
 
-console.warn('main...');
-
-require('./api');
+const TEMP = [ 'a', 'b' ];
+const app = new Vue({
+    el: '#app',
+    data: {
+        message: 'Hello Vue!',
+        objccccc: {
+            ... {
+                c: 'abc',
+            },
+        },
+    },
+    methods: {
+        handleClick() {
+            console.warn('click...', [
+                ...TEMP,
+            ]);
+            this.message = this.message + 1;
+        },
+    },
+});
 
+console.warn('main...');
diff --git a/src/commands/build/build.test.js b/src/commands/build/build.test.js
@@ -4,6 +4,8 @@
 
 describe('Command build', () => {
 
+    process.env.MICRO_APP_TEST = true;
+
     let PORTS = 10000;
     function getArgvs() {
         const port = PORTS++;
diff --git a/src/commands/build/index.js b/src/commands/build/index.js
@@ -2,7 +2,6 @@
 
 const defaults = {
     clean: false,
-    target: 'web',
 };
 
 module.exports = function buildCommand(api, opts) {
@@ -16,7 +15,7 @@ module.exports = function buildCommand(api, opts) {
         const newOpts = _.cloneDeep(oldOpts);
         Object.assign(newOpts.options, {
             '--clean': 'remove the dist directory before building the project',
-            '--target': `web | node (default: ${defaults.target})`,
+            '--target <target>': 'app | lib | node etc. (default: "app")',
         });
         return newOpts;
     });
@@ -41,14 +40,12 @@ module.exports = function buildCommand(api, opts) {
                 }
             }
 
-            const options = api.config || {};
+            const webpackConfig = api.resolveWebpackConfig();
 
-            const webpackConfig = api.resolveWebpackConfig({
-                target: args.target,
-            });
+            const options = api.config || {};
 
             // check for common config errors
-            validateWebpackConfig(webpackConfig, api, options, args.target);
+            validateWebpackConfig(webpackConfig, api, options, api.target);
 
             const targetDir = api.resolve(options.outputDir);
 
diff --git a/src/commands/inspect/index.js b/src/commands/inspect/index.js
@@ -1,7 +1,6 @@
 'use strict';
 
 const defaults = {
-    target: 'app',
     index: 0,
 };
 
@@ -17,14 +16,13 @@ module.exports = function inspectCommand(api, opts) {
         usage: 'micro-app inspect [options] [...paths]',
         options: {
             '--mode': 'specify env mode (default: development)',
-            '--type <type>': 'adapter type, eg. [ webpack, etc. ].',
+            '--target <target>': 'app | lib | node etc. (default: "app")',
             '--rule <ruleName>': 'inspect a specific module rule',
             '--plugin <pluginName>': 'inspect a specific plugin',
             '--rules': 'list all module rule names',
             '--plugins': 'list all plugin names',
             '--verbose': 'show full function definitions in output',
             '--index': 'select config by index (default: 0)',
-            '--target': `app | lib | plugin (default: ${defaults.target})`,
         },
         details: `
 Examples:
@@ -36,12 +34,6 @@ Examples:
     },
     args => {
 
-        // TODO 兼容, 下个版本删除
-        if (args.t && !args.type) {
-            args.type = args.t;
-            logger.warn('you should be use "--type <type>"!!!');
-        }
-
         for (const key in defaults) {
             if (args[key] == null) {
                 args[key] = defaults[key];
@@ -51,9 +43,7 @@ Examples:
         const { toString } = require('webpack-chain');
         const { highlight } = require('cli-highlight');
 
-        const webpackConfig = api.resolveWebpackConfig({
-            target: args.target,
-        });
+        const webpackConfig = api.resolveWebpackConfig();
 
         if (process.env.MICRO_APP_TEST) {
             api.logger.debug('MICRO_APP_TEST --> Exit!!!');
diff --git a/src/commands/inspect/inspect.test.js b/src/commands/inspect/inspect.test.js
@@ -4,6 +4,8 @@
 
 describe('Plugin micro-app:inspect', () => {
 
+    process.env.MICRO_APP_TEST = true;
+
     it('inspect', async () => {
         const { service } = require('@micro-app/cli');
 
diff --git a/src/commands/serve/index.js b/src/commands/serve/index.js
@@ -123,12 +123,10 @@ module.exports = function serveCommand(api, opts) {
                 return webpackChain;
             });
 
-            const webpackConfig = api.resolveWebpackConfig({
-                target: args.target,
-            });
+            const webpackConfig = api.resolveWebpackConfig();
 
             // check for common config errors
-            validateWebpackConfig(webpackConfig, api, options, args.target);
+            validateWebpackConfig(webpackConfig, api, options, api.target);
 
             const config = selectModifyConfig(webpackConfig);
 
diff --git a/src/commands/serve/serve.test.js b/src/commands/serve/serve.test.js
@@ -4,6 +4,8 @@
 
 describe('Command serve', () => {
 
+    process.env.MICRO_APP_TEST = true;
+
     let PORTS = 20000;
     function getArgvs() {
         const port = PORTS++;
diff --git a/src/extends/enhance/index.js b/src/extends/enhance/index.js
@@ -16,7 +16,7 @@ module.exports = function WebpackAdapter(api, opts) {
 
     api.extendMethod('resolveChainableWebpackConfig', {
         description: 'resolve webpack-chain config.',
-    }, options => {
+    }, (options = {}) => {
         if (!initialized) {
             logger.throw('please call after "onInitWillDone" !');
         }
@@ -29,8 +29,9 @@ module.exports = function WebpackAdapter(api, opts) {
         delete _originalWebpackConfig.plugins; // 不接受 plugins
         webpackChainConfig.merge(_originalWebpackConfig);
 
-        if (options.target) { // target, 默认 web
-            webpackChainConfig.target(options.target);
+        const target = api.target; // target, 默认 web
+        if ([ 'app', 'lib', 'web' ].includes(target)) { // 其它类型外部自己设置
+            webpackChainConfig.target('web');
         }
 
         const finalWebpackChainConfig = api.applyPluginHooks('modifyChainWebpackConfig', webpackChainConfig, options);
@@ -42,7 +43,7 @@ module.exports = function WebpackAdapter(api, opts) {
 
     api.extendMethod('resolveWebpackConfig', {
         description: 'resolve webpack config.',
-    }, options => {
+    }, (options = {}) => {
         const finalWebpackChainConfig = api.resolveChainableWebpackConfig(options);
         const webpackConfig = finalWebpackChainConfig.toConfig();
         const finalWebpackConfig = api.applyPluginHooks('modifyWebpackConfig', webpackConfig, options);
diff --git a/src/extends/unified/babel.js b/src/extends/unified/babel.js
@@ -0,0 +1,28 @@
+'use strict';
+
+module.exports = function unifiedExtend(api, opts) {
+
+    api.assertVersion('>=0.3.0');
+
+    const path = require('path');
+
+    api.modifyChainWebpackConfig(webpackChain => {
+        // const isProd = api.mode === 'production';
+        // const rootOptions = api.config || {};
+
+        webpackChain.module
+            .rule('js')
+            .test(/\.m?jsx?$/)
+            .exclude.add((/node_modules/)).end()
+            .use('babel-loader')
+            .loader(require.resolve('babel-loader'));
+
+
+        return webpackChain;
+    });
+};
+
+module.exports.configuration = {
+    description: 'webpack config - babel',
+};
+
diff --git a/src/extends/unified/base.js b/src/extends/unified/base.js
@@ -118,21 +118,30 @@ module.exports = function unifiedExtend(api, opts) {
             chunkConfig(webpackChain);
         }
 
-        // const isProd = api.mode === 'production';
+        const isProd = api.mode === 'production';
 
         // load html
+        const SYMBOL_KEY = Symbol.for('KEY');
         const multiPageConfig = options.pages;
         const pages = Object.keys(multiPageConfig);
         const pageHtmlOptions = pages.reduce((arrs, name) => {
             const item = multiPageConfig[name];
-            return arrs.concat(item.htmls);
+            return arrs.concat([].concat(item.htmls).map(html => {
+                html[SYMBOL_KEY] = name;
+                return html;
+            }));
         }, []);
         if (pageHtmlOptions.length > 0) {
             const HTMLPlugin = tryRequire('html-webpack-plugin');
             if (HTMLPlugin) {
                 pageHtmlOptions.forEach((htmlOpts, index) => {
+                    const name = htmlOpts[SYMBOL_KEY];
                     const pname = index ? `html-${name}-${index}` : `html-${name}`;
 
+                    if (!htmlOpts.chunks) {
+                        htmlOpts.chunks = [ name ];
+                    }
+
                     if (htmlOpts.chunks && Array.isArray(htmlOpts.chunks)) {
                         [ CHUNK_COMMON_NAME, CHUNK_VENDORS_NAME, CHUNK_NAME ].forEach(key => {
                             if (!htmlOpts.chunks.includes(key)) {
@@ -141,19 +150,19 @@ module.exports = function unifiedExtend(api, opts) {
                         });
                     }
 
-                    // if (isProd) { // 暂时不定义，外部自行配置
-                    //     Object.assign(htmlOpts, {
-                    //         minify: {
-                    //             removeComments: true,
-                    //             collapseWhitespace: true,
-                    //             removeAttributeQuotes: true,
-                    //             collapseBooleanAttributes: true,
-                    //             removeScriptTypeAttributes: true,
-                    //             // more options:
-                    //             // https://github.com/kangax/html-minifier#options-quick-reference
-                    //         },
-                    //     });
-                    // }
+                    if (isProd) { // 暂时不定义，外部自行配置
+                        Object.assign(htmlOpts, {
+                            minify: {
+                                removeComments: true,
+                                collapseWhitespace: true,
+                                removeAttributeQuotes: true,
+                                collapseBooleanAttributes: true,
+                                removeScriptTypeAttributes: true,
+                                // more options:
+                                // https://github.com/kangax/html-minifier#options-quick-reference
+                            },
+                        });
+                    }
 
                     webpackChain
                         .plugin(pname)
diff --git a/src/extends/unified/rules.js b/src/extends/unified/rules.js
diff --git a/src/extends/unified/vue.js b/src/extends/unified/vue.js
diff --git a/src/index.js b/src/index.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,4 @@ module.exports = {`
`7`	`7`	`extends: [`
`8`	`8`	`"eslint-config-2o3t"`
`9`	`9`	`],`
`10`		`- parserOptions: {`
`11`		`- parser: "babel-eslint"`
`12`		`- },`
`13`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ const config = {`
`18`	`18`	`{`
`19`	`19`	`filename: 'index.html',`
`20`	`20`	`hash: true,`
`21`		`- chunks: [ 'common', 'main' ],`
	`21`	`+ chunks: [ 'main' ],`
`22`	`22`	`template: './simple/client/index.html',`
`23`	`23`	`},`
`24`	`24`	`],`