@ray-js/builder-web 0.3.0-beta.1c347991

package/lib/build.d.ts

@@ -0,0 +1,5 @@
+import type { API, CliOptions } from '@ray-js/types';
+import webpack from 'webpack';
+export default function build(options: CliOptions, context: {
+    api: API;
+}): Promise<webpack.Compiler>;

package/lib/build.js

@@ -0,0 +1,254 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const address_1 = __importDefault(require("address"));
+const case_sensitive_paths_webpack_plugin_1 = __importDefault(require("case-sensitive-paths-webpack-plugin"));
+const colors_1 = __importDefault(require("colors"));
+const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
+const detect_port_1 = __importDefault(require("detect-port"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const hard_source_webpack_plugin_1 = __importDefault(require("hard-source-webpack-plugin"));
+const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
+const inquirer_1 = __importDefault(require("inquirer"));
+const path_1 = __importDefault(require("path"));
+const webpack_1 = __importDefault(require("webpack"));
+const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
+const webpack_chain_1 = __importDefault(require("webpack-chain"));
+const webpack_dev_server_1 = __importDefault(require("webpack-dev-server"));
+const webpackbar_1 = __importDefault(require("webpackbar"));
+const shared_1 = require("@ray-js/shared");
+const process_css_1 = require("./loaders/process-css");
+const process_less_1 = require("./loaders/process-less");
+colors_1.default.enable();
+const LOG_PREFIX = 'builder-web';
+function build(options, context) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { api } = context;
+        const compileOptions = Object.assign({
+            cwd: process.cwd(),
+            mode: 'development',
+            watch: false,
+            analyze: false,
+            mini: false,
+            source: 'src',
+            output: 'dist',
+            target: 'web',
+            port: '8088',
+            https: false,
+        }, options);
+        const { cwd, mode, output, target, analyze, watch, mini, source, port, https } = compileOptions;
+        process.env.NODE_ENV = mode;
+        process.env.PLATFORM = 'web';
+        process.env.REMAX_PLATFORM = 'web';
+        const outputPath = (0, shared_1.resolvePath)([output, target], { cwd });
+        const isDev = mode !== 'production';
+        const isProd = mode === 'production';
+        const config = new webpack_chain_1.default();
+        config.mode(mode);
+        if (isDev) {
+            const devtool = isDev ? 'cheap-module-eval-source-map' : 'source-map';
+            config.devtool(devtool);
+            shared_1.log.info(LOG_PREFIX, 'enabled webpack devtool SourceMap '.yellow);
+        }
+        config.context(cwd);
+        config.output.path(outputPath).publicPath('/');
+        config.resolve.extensions.merge([
+            '.web.tsx',
+            '.web.jsx',
+            '.web.ts',
+            '.web.js',
+            '.tsx',
+            '.jsx',
+            '.ts',
+            '.js',
+            '.json',
+        ]);
+        config.resolve.alias.merge({
+            '@': path_1.default.resolve(cwd, source),
+            '@babel/runtime': path_1.default.dirname(require.resolve('@babel/runtime/package.json')),
+        });
+        // 启动页面
+        config.entry('main').add('./.ray/main.tsx');
+        // babel-loader
+        config.module
+            .rule('js')
+            .test(/\.(ts|js)x?$/)
+            .exclude.add(/node_modules/)
+            .end()
+            .use('babel-loader')
+            .loader(require.resolve('babel-loader'))
+            .options({
+            presets: [[require.resolve('@ray-js/babel-preset-standard')]],
+        })
+            .end()
+            .use('env-loader')
+            .loader(require.resolve('@ray-js/env-loader'))
+            .options({
+            platform: 'web',
+        })
+            .end();
+        (0, process_css_1.processCss)(config);
+        (0, process_less_1.processLess)(config);
+        config.optimization
+            .minimize(mini)
+            .runtimeChunk({ name: 'runtime' })
+            .noEmitOnErrors(watch)
+            .splitChunks({
+            chunks: 'all',
+            maxInitialRequests: Infinity,
+            minSize: 0,
+            name: isDev,
+            cacheGroups: {
+                // 项目内公用的
+                common: {
+                    name: 'common',
+                    minChunks: 2,
+                    priority: -20,
+                    reuseExistingChunk: true,
+                },
+                // 依赖中公用的
+                vendors: {
+                    name: 'vendors',
+                    chunks: 'initial',
+                    minChunks: 2,
+                    test: /[\\/]node_modules[\\/]/,
+                    priority: -10,
+                    reuseExistingChunk: true,
+                },
+            },
+        });
+        config.performance.hints(false);
+        config.plugin('defined').use(webpack_1.default.DefinePlugin, [
+            {
+                'process.env.NODE_ENV': JSON.stringify(mode),
+                'process.env.PLATFORM': JSON.stringify(target),
+            },
+        ]);
+        analyze && config.plugin('bundle-analyzer-plugin').use(webpack_bundle_analyzer_1.BundleAnalyzerPlugin);
+        config.plugin('case-sensitive-paths-webpack-plugin').use(case_sensitive_paths_webpack_plugin_1.default);
+        isDev && config.plugin('hard-source-webpack-plugin').use(hard_source_webpack_plugin_1.default);
+        isProd &&
+            config.plugin('webpack.HashedModuleIdsPlugin').use(webpack_1.default.HashedModuleIdsPlugin, [
+                {
+                    hashFunction: 'sha256',
+                    hashDigest: 'hex',
+                    hashDigestLength: 20,
+                },
+            ]);
+        config.plugin('webpackbar').use(webpackbar_1.default, [{ name: 'web' }]);
+        config.plugin('html-webpack-plugin').use(html_webpack_plugin_1.default, [
+            {
+                template: path_1.default.join(__dirname, '../views/index.ejs'),
+                chunks: ['main'],
+                filename: 'index.html',
+            },
+        ]);
+        const publicDir = path_1.default.join(cwd, 'public');
+        if (fs_extra_1.default.existsSync(publicDir)) {
+            shared_1.log.info(LOG_PREFIX, 'copy public folder files'.yellow, publicDir.underline.blue);
+            config.plugin('copy').use(copy_webpack_plugin_1.default, [
+                {
+                    patterns: [
+                        {
+                            from: path_1.default.join(cwd, 'public'),
+                            to({ absoluteFilename }) {
+                                return `${path_1.default.relative(publicDir, absoluteFilename)}`;
+                            },
+                        },
+                    ],
+                },
+            ]);
+        }
+        api.callPluginMethod('configWebpack', { config });
+        const externals = config.get('externals');
+        const internalExternals = {
+            react: 'React',
+            'react-dom': 'ReactDOM',
+        };
+        if (Array.isArray('externals')) {
+            config.set('externals', [...externals, internalExternals]);
+        }
+        else {
+            config.set('externals', Object.assign(Object.assign({}, externals), internalExternals));
+        }
+        api.configIntoWebpackConfig(config);
+        if (watch) {
+            const defaultHttpPort = parseInt(port);
+            const httpPort = yield (0, detect_port_1.default)(defaultHttpPort);
+            if (httpPort != defaultHttpPort) {
+                const { ok } = yield inquirer_1.default.prompt([
+                    {
+                        name: 'ok',
+                        type: 'confirm',
+                        prefix: defaultHttpPort,
+                        suffix: httpPort,
+                        message: 'Server port conflict, use the new port instead? ',
+                    },
+                ]);
+                if (!ok) {
+                    process.exit(0);
+                }
+            }
+            let devOptions = {
+                contentBase: outputPath,
+                compress: true,
+                hot: true,
+                open: false,
+                historyApiFallback: true,
+                disableHostCheck: true,
+                port: httpPort,
+                publicPath: '/',
+                stats: {
+                    colors: true,
+                    modules: false,
+                },
+            };
+            const ip = address_1.default.ip();
+            const compiler = (0, webpack_1.default)(config.toConfig());
+            const server = new webpack_dev_server_1.default(compiler, devOptions);
+            server.listen(httpPort, '0.0.0.0', () => {
+                console.log();
+                shared_1.log.info('[wds]', 'HTTP local      :', `http://127.0.0.1:${httpPort}`.blue.underline);
+                shared_1.log.info('[wds]', 'HTTP network    :', `http://${ip}:${httpPort}`.blue.underline);
+                console.log();
+            });
+            return Promise.resolve(compiler);
+        }
+        else {
+            return new Promise((resolve) => {
+                const compiler = (0, webpack_1.default)(config.toConfig());
+                compiler.run((error, stats) => {
+                    if (error) {
+                        shared_1.log.error(LOG_PREFIX, error.message);
+                        throw error;
+                    }
+                    const info = stats.toJson();
+                    if (stats.hasErrors()) {
+                        shared_1.log.error(LOG_PREFIX, info.errors.join('\n'));
+                        process.exit(1);
+                    }
+                    if (stats.hasWarnings()) {
+                        console.warn(info.warnings.join('\n'));
+                    }
+                    console.log(stats.toString({
+                        colors: true,
+                        modules: false,
+                    }));
+                });
+                resolve(compiler);
+            });
+        }
+    });
+}
+exports.default = build;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import build from './build';
+export { build };

package/lib/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.build = void 0;
+const build_1 = __importDefault(require("./build"));
+exports.build = build_1.default;

package/lib/loaders/process-css.d.ts

@@ -0,0 +1,2 @@
+import Config from 'webpack-chain';
+export declare function processCss(config: Config): void;

package/lib/loaders/process-css.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processCss = void 0;
+const postcss_units_transform_1 = __importDefault(require("postcss-units-transform"));
+const autoprefixer_1 = __importDefault(require("autoprefixer"));
+const postcss_selector_rename_1 = __importDefault(require("postcss-selector-rename"));
+function processCss(config) {
+    [
+        { name: 'less-module', test: /\.module\.css$/, cssModules: true },
+        { name: 'css', test: /\.css$/, cssModules: false, exclude: /\.module\.css$/ },
+    ].forEach(({ test, cssModules, name, exclude }) => {
+        const rule = config.module.rule(name).test(test);
+        const cssOptions = {
+            sourceMap: config.get('mode') === 'development',
+            modules: cssModules ? { localIdentName: '[folder]-[local]-[hash:base64:6]' } : false,
+        };
+        if (exclude) {
+            rule.exclude.add(exclude);
+        }
+        rule.use('style-loader').loader(require.resolve('style-loader'));
+        rule.use('css-loader').loader(require.resolve('css-loader')).options(cssOptions);
+        rule
+            .use('post-loader')
+            .loader(require.resolve('postcss-loader'))
+            .options({
+            ident: 'postcss',
+            plugins: [
+                (0, autoprefixer_1.default)({ overrideBrowserslist: '>0.25%, not dead' }),
+                (0, postcss_selector_rename_1.default)({
+                    selector: { tags: true },
+                    rename(name) {
+                        return 'ty-' + name;
+                    },
+                }),
+                (0, postcss_units_transform_1.default)({
+                    divisor: 100,
+                    multiple: 1,
+                    decimalPlaces: 2,
+                    comment: 'no',
+                    targetUnits: 'rem',
+                    sourceUnits: 'rpx',
+                }),
+            ],
+        });
+    });
+}
+exports.processCss = processCss;

package/lib/loaders/process-less.d.ts

@@ -0,0 +1,2 @@
+import Config from 'webpack-chain';
+export declare function processLess(config: Config): void;

package/lib/loaders/process-less.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processLess = void 0;
+const postcss_units_transform_1 = __importDefault(require("postcss-units-transform"));
+const autoprefixer_1 = __importDefault(require("autoprefixer"));
+const postcss_selector_rename_1 = __importDefault(require("postcss-selector-rename"));
+function processLess(config) {
+    [
+        { name: 'less-module', test: /\.module\.less$/, cssModules: true },
+        { name: 'less', test: /\.less$/, cssModules: false, exclude: /\.module\.less$/ },
+    ].forEach(({ test, cssModules, name, exclude }) => {
+        const rule = config.module.rule(name).test(test);
+        const cssOptions = {
+            sourceMap: config.get('mode') === 'development',
+            modules: cssModules ? { localIdentName: '[folder]-[local]-[hash:base64:6]' } : false,
+        };
+        if (exclude) {
+            rule.exclude.add(exclude);
+        }
+        rule.use('style-loader').loader(require.resolve('style-loader'));
+        rule.use('css-loader').loader(require.resolve('css-loader')).options(cssOptions);
+        rule
+            .use('post-loader')
+            .loader(require.resolve('postcss-loader'))
+            .options({
+            ident: 'postcss',
+            plugins: [
+                (0, autoprefixer_1.default)({ overrideBrowserslist: '>0.25%, not dead' }),
+                (0, postcss_selector_rename_1.default)({
+                    selector: { tags: true },
+                    rename(name) {
+                        return 'ty-' + name;
+                    },
+                }),
+                (0, postcss_units_transform_1.default)({
+                    divisor: 100,
+                    multiple: 1,
+                    decimalPlaces: 2,
+                    comment: 'no',
+                    targetUnits: 'rem',
+                    sourceUnits: 'rpx',
+                }),
+            ],
+        });
+        rule
+            .use('less-loader')
+            .loader('less-loader')
+            .options({
+            sourceMap: config.get('mode') === 'development',
+        });
+    });
+}
+exports.processLess = processLess;

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@ray-js/builder-web",
+  "version": "0.3.0-beta.1c347991",
+  "description": "Ray builder for web",
+  "keywords": [
+    "ray"
+  ],
+  "author": "子长 <zichang.nong@tuya.com>",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "views"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "tsc -p ./tsconfig.build.json",
+    "watch": "tsc -p ./tsconfig.build.json --watch"
+  },
+  "dependencies": {
+    "@ray-js/babel-preset-standard": "^0.3.0-beta.1c347991",
+    "@ray-js/env-loader": "^0.3.0-beta.1c347991",
+    "@ray-js/shared": "^0.3.0-beta.1c347991",
+    "@ray-js/types": "^0.3.0-beta.1c347991",
+    "address": "^1.1.2",
+    "autoprefixer": "9.x",
+    "camelcase": "^6.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "chokidar": "^3.5.2",
+    "colors": "1.4.0",
+    "copy-webpack-plugin": "6.x",
+    "css-loader": "5.x",
+    "detect-port": "^1.3.0",
+    "fs-extra": "^10.0.0",
+    "hard-source-webpack-plugin": "^0.13.1",
+    "html-webpack-plugin": "4.x",
+    "inquirer": "^8.2.0",
+    "less": "^4.1.1",
+    "less-loader": "7.x",
+    "postcss-loader": "3.x",
+    "postcss-selector-rename": "^2.1.0",
+    "postcss-units-transform": "^1.1.0",
+    "rimraf": "^3.0.2",
+    "style-loader": "2.x",
+    "webpack": "4.x",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-chain": "^6.5.1",
+    "webpack-dev-server": "^3.0.0",
+    "webpackbar": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^16.9.1",
+    "typescript": "^4.4.3"
+  },
+  "maintainers": [
+    {
+      "name": "tuyafe",
+      "email": "tuyafe@tuya.com"
+    }
+  ],
+  "gitHead": "e0bd013022ddda63380d3c9e20fd8cadb46cd61f",
+  "repository": {}
+}

package/views/index.ejs

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="apple-mobile-web-app-title" content="Ray app" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no, viewport-fit=cover" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <meta name="renderer" content="webkit" />
+    <meta name="force-rendering" content="webkit" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-touch-fullscreen" content="yes" />
+    <meta name="theme-color" content="#f2f4f6" />
+    <title>Ray app</title>
+    <link rel="stylesheet" href="//unpkg.com/normalize.css@8.0.1/normalize.css" />
+    <script>
+      var PUBLIC_PATH = '<%= webpackConfig.output.publicPath %>';
+    </script>
+  </head>
+
+  <body>
+    <% if (webpackConfig.mode==='production' ) {%>
+    <script src="//unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
+    <script src="//unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
+    <% } else { %>
+    <script src="//unpkg.com/react@17.0.2/umd/react.development.js"></script>
+    <script src="//unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
+    <% } %>
+  </body>
+</html>