{"id":22606389,"url":"https://github.com/samsoncao/react-iframe","last_synced_at":"2025-06-27T06:33:16.212Z","repository":{"id":99012102,"uuid":"168331889","full_name":"samsonCao/react-iframe","owner":"samsonCao","description":"2019react 中后台系统搭建，适合大型项目","archived":false,"fork":false,"pushed_at":"2019-10-09T01:41:09.000Z","size":1489,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-11T05:15:39.681Z","etag":null,"topics":["alifd","framework","iframe","next","react","react-app","redux","rematch","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samsonCao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-01-30T11:28:33.000Z","updated_at":"2024-09-11T10:00:14.000Z","dependencies_parsed_at":"2023-04-20T01:27:00.808Z","dependency_job_id":null,"html_url":"https://github.com/samsonCao/react-iframe","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/samsonCao/react-iframe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samsonCao%2Freact-iframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samsonCao%2Freact-iframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samsonCao%2Freact-iframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samsonCao%2Freact-iframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samsonCao","download_url":"https://codeload.github.com/samsonCao/react-iframe/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samsonCao%2Freact-iframe/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259884469,"owners_count":22926444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alifd","framework","iframe","next","react","react-app","redux","rematch","webpack4"],"created_at":"2024-12-08T14:13:26.052Z","updated_at":"2025-06-14T21:06:18.577Z","avatar_url":"https://github.com/samsonCao.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[react16.7.0生命周期介绍.md](https://github.com/samsonCao/react-iframe/blob/master/newLifeCircle.md)\n\n[学习本项目需要具备的基础知识介绍.md](https://github.com/samsonCao/react-iframe/blob/master/%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BB%8B%E7%BB%8D.md)\n\n[学习本项目用到的技术栈介绍.md](https://github.com/samsonCao/react-iframe/blob/master/technology-stack.md)\n\n[各个框架的对比.md](https://github.com/samsonCao/react-iframe/blob/master/%E6%A1%86%E6%9E%B6%E5%AF%B9%E6%AF%94.md)\n\n### 运行项目\n```javascript\nnpm install\nnpm run dll\nnpm run dev\n```\n\n### 新建项目\n- mkdir react-iframe创建文件夹\n- cd react-iframe进入自己的项目文件夹\n- npm init 创建package.json仓库\n- touch .gitignore 创建文件.gitignore\n- mkdir app 创建入口文件夹app\n- mkdir scripts 创建脚本文件夹scripts\n    - touch scripts/pack.dev.js 在scripts文件夹下创建开发环境脚本文件\n    - touch scrpts/pack.build.js 在scrits文件夹下创建打包配置脚本文件\n- touch app/index.html 创建入口html文件\n\n### 开发环境安装的依赖 npm i --save-dev xxxx\n\n- webpack\n    - 用于编译JavaScript模块\n- webpack-cli\n    - 是一种在命令行下使用 Babel 编译文件的简单方法\n    - webpack v4或更高版本，需要安装CLI。\n    - 官网链接: https://github.com/webpack/webpack-cli\n- webpack-dev-server\n    - webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。\n    - 为静态文件提供服务\n    - 自动刷新和热替换(HMR)\n    - 配置在./package.json--\u003escripts--\u003edev:webpack-dev-server  scripts/pack.dev.js--\u003edevServer: {}\n    - 官网链接: https://webpack.js.org/configuration/dev-server/\n- cross-env\n    - 跨平台地设置及使用环境变量,设置的环境变量会被webpack读取\n    - 设置 ./package.json--\u003e scripts/dev--\u003e \"dev\": \"cross-env NODE_ENV=development\n    - 官网链接https://github.com/kentcdodds/cross-env#readme\n- @babel/cli\n    - 用于从命令行编译文件\n    - 官网链接： https://babeljs.io/docs/en/babel-cli/\n- @babel/core\n    - babel的核心依赖包， 包括了整个babel工作流。\n    - babel的配置文件时.babelIrc,存放在项目的根目录下,使用Babel的第一步，就是配置这个文件\n    - 如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块\n    - 链接: https://babeljs.io/docs/en/next/babel-core.html\n- @babel/preset-env\n    - 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5\n    - 获取指定的任何目标环境，并根据其映射检查它们，以编译插件列表并将其传递给Babel。\n    - 在 ./.babelrc中配置\n    - 链接： https://babeljs.io/docs/en/babel-preset-env/\n    - 第三方说明文档 ： http://www.cnblogs.com/chyingp/archive/2018/06/05/9137849.html\n- @babel/preset-react\n    - 专门针对react的转码包，例如：转换[JSX](https://facebook.github.io/jsx/)语法。\n    - 官网链接：https://babeljs.io/docs/en/babel-preset-react/\n- @babel/polyfill\n    - Babel默认只转换新的JavaScript句法（syntax），而不转换新的API\n    - 举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。\n    - 可以理解为兼容性补丁\n    - 官网链接： https://babeljs.io/docs/en/babel-polyfill/\n    - 解释说明参考链接： https://remysharp.com/2010/10/08/what-is-a-polyfill\n- @babel/plugin-proposal-class-properties\n    - 转换es2015静态类属性以及使用es2016属性声明的语法例如class类\n    - 类的介绍： http://es6.ruanyifeng.com/#docs/class\n    - 官网链接： https://babeljs.io/docs/en/babel-plugin-proposal-class-properties\n- @babel/plugin-proposal-decorators\n    - 类修饰器例如@xxx\n    - 类修饰器定义和解释： http://es6.ruanyifeng.com/#docs/decorator\n    - 官网链接： https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html\n- @babel/plugin-syntax-dynamic-import\n    - 使babel能够理解动态的import语法，可以解析import语法\n    - react中做代码拆分的工具\n    - react官方推荐的代码拆分示例：https://reacttraining.com/react-router/web/guides/code-splitting\n    - 官网链接： https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/\n- @babel/plugin-transform-runtime\n    - 会添加到每个文件和每个模块中，避免编译过程中的重复。减小库和工具包的体积。\n    - 启用后babel会使用babel-runtime 下的工具函数，转译代码\n    - 在没有使用 babel-runtime 之前，库和工具包一般不会直接引入 polyfill。\n    否则像 Promise 这样的全局对象会污染全局命名空间，这就要求库的使用者自己提供 polyfill。这些 polyfill 一般在库和工具的使用说明中会提到，比如很多库都会有要求提供 es5 的 polyfill。在使用 babel-runtime 后，库和工具只要在 package.json 中增加依赖 babel-runtime，交给 babel-runtime 去引入 polyfill 就行了；\n    - 官网链接：https://babeljs.io/docs/en/babel-plugin-transform-runtime\n- babel-loader\n    - 允许Babel和webpack转换JavaScript文件\n    - 官网链接：https://webpack.docschina.org/loaders/babel-loader/\n- html-webpack-plugin\n    - 用来生成编译后的html文件，其中包含output的filename所命名的js文件\n    - 官网链接： https://webpack.docschina.org/plugins/html-webpack-plugin\n    - 详细解释： https://www.npmjs.com/package/html-webpack-plugin\n- sass-loader\n    - 用sass的格式写css\n    - 依赖node-sass style-loader css-loader\n    - 官方git: https://github.com/webpack-contrib/sass-loader\n- css-loader\n    - 加载.css文件\n    - css-loader的npm介绍： https://www.npmjs.com/package/css-loader\n- style-loader\n    - 使用style标签将css-loader内部样式注入到我们的HTML页面\n    - 一般用在开发环境\n    - style-loader的npm介绍：https://www.npmjs.com/package/style-loader\n- node-sass\n    - 高效的本地编译sass到css文件，甚至可以通过中间件的方式自动编译\n    - git网址： https://github.com/sass/node-sass\n- file-loader\n    - 引入文件用 例如：import img from './file.png';\n    - file-loader的npm介绍： https://www.npmjs.com/package/file-loader\n- mini-css-extract-plugin\n    - 将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap。要求webpack4及其以上的版本\n    - 只能用在生成环境，并且不能有style-loader，因此开发环境配style-loader,生产环境配这个。\n    - git官网 https://github.com/webpack-contrib/mini-css-extract-plugin\n- terser-webpack-plugin\n    - 压缩JS，只支持webpack4.0.0以上\n    - git官网 https://github.com/webpack-contrib/terser-webpack-plugin\n- optimize-css-assets-webpack-plugin\n    - mini-css-extract-plugin分离css文件再通过optimize-css-assets-webpack-plugin压缩css文件\n    - 主要用在生产环境\n    - github官网： https://github.com/NMFR/optimize-css-assets-webpack-plugin\n- babel-plugin-import\n    - 按需引入 import\n    - git地址 https://github.com/ant-design/babel-plugin-import\n- eslint\n    - 代码检查工具详情请看-- 基础知识介绍.md\n- babel-eslint\n    - 只要是babel支持的代码，都会有eslint校验。如果不配置，值支持eslint原生的语法\n    - .eslintrc文件中的parse解析器是babel-eslint\n    - github网址：https://github.com/babel/babel-eslint\n- eslint-plugin-babel\n    - 让eslint支持一些实验中的校验规则,即使这些规则即使是非标准的，通过这个插件也可以避免报错\n    - 需要在.eslintrc的plugins中配置eslint-plugin-babel,省略了前缀eslint-plugin-\n    - github地址：https://github.com/babel/eslint-plugin-babel\n- eslint-config-standard\n    - 手动配置eslint，要和下面的命令共用，并且要要在.eslintrc中设置extends\n        npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node\n    - 适用于JavaScript标准样式的ESLint 可共享配置-高级用法\n    - 作用是使用.eslintrc中的继承 extends,共享一些配置\n    - github地址：https://github.com/standard/eslint-config-standard\n- eslint-plugin-standard\n    - 标准的eslint规则\n    - https://github.com/standard/eslint-plugin-standard#readme\n- eslint-plugin-promise\n    - 使用JavaScript的promise的最佳实践,内置了一些校验规则，可以直接继承使用\n    - 需要在.eslintrc中的extends中配置\"plugin:promise/recommended\"\n    - https://github.com/xjamundx/eslint-plugin-promise\n- eslint-plugin-import\n    - 用于支持ES2015+ (ES6+)的 import/export语法的eslint检测\n    - 防止错误拼写文件路径和导出名称的问题\n    - 需要在.eslintrc中配置settings对象\n    - github地址：https://github.com/benmosher/eslint-plugin-import\n- eslint-plugin-node\n    - 针对nodejs的其它eslint规则\n    - github地址：https://github.com/mysticatea/eslint-plugin-node#readme\n- eslint-config-standard-react\n    - 用于JavaScript标准样式的 React / JSX支持的ESLint 可共享配置\n    - github地址： https://github.com/standard/eslint-config-standard-react\n- eslint-plugin-react\n    - 针对react实现的特定eslint规则\n    - 如果eslint是全局的，此处引入的eslint-plugin-react也必须放在全局\n    -github地址： https://github.com/yannickcr/eslint-plugin-react\n- pre-commit\n    - 预提交时检查代码是否符合eslint校验规则\n    - 需要再package.json中配置pre-commit字段\n    - github网址：https://github.com/observing/pre-commit\n- add-asset-html-webpack-plugin\n    - 将JavaScript或CSS资源添加到生成的HTML中\n    - 用在项目分包压缩中，本项目插入的是dll文件\n    - 依赖html-webpack-plugin，因为要先生成html文件才能插入\n    - github网址： https://github.com/SimenB/add-asset-html-webpack-plugin#readme\n- copy-webpack-plugin\n    - 将单个文件或整个目录复制到构建目录\n    - 本项目是把public下的文件放到build文件下，生产环境是打包在一起\n    - github网址： https://github.com/webpack-contrib/copy-webpack-plugin\n- webpack-merge\n    - 合并scripts文件夹中的某些js文件\n    - 本项目是把pack.base.js中的文件合并到pack.build.js中\n    - github网站： https://github.com/survivejs/webpack-merge\n\n- plop\n    - 使用plop配置模板，通过命令行生成模板代码\n    - github网址：https://github.com/amwmedia/plop\n### 在生产环境安装的依赖 npm i --save xxx\n- react\n    - 是react的核心代码，包含生成虚拟dom的函数react.createElement,以及Component类等基础配置\n    - 官网： https://reactjs.org/\n- react-dom\n    - 核心功能时把虚拟dom渲染到文中变成真实dom，一般在入口文件中用ReactDOM.render(element, container[, callback])\n    - 官网: https://reactjs.org/docs/react-dom.html\n- prop-types\n    - 依赖react和react-dom,主要作用是对传入的属性数据做类型校验\n    - 官网： https://reactjs.org/docs/typechecking-with-proptypes.html\n- @babel/runtime\n    - 让编译模块复用工具函数,减小编译后的代码体积\n    - 需要安装babel/plugin-transform-runtime在生产环境\n- alifd/next\n    - 是 Fusion Design 中的面向 PC 端可配置组件库，基于 React 实现，支持所有现代浏览器和 IE9+。\n    - 官方文档 https://fusion.design/component/doc/105\n    - 推荐在开发环境配置babel-plugin-import，在.babeIrc中进行配置，按需引入\n- moment\n    - alifd依赖moment, 因此要先引入moment\n    - moment是JavaScript中一个处理日期的类库\n    - 中文官网 http://momentjs.cn/\n- react-router-dom\n    - 把react的路由和dom绑定起来，实现路由的核心功能\n    - 和react-route区别是，react-router-dom是在react-router基础上的再次封装，并且增加了一些新功能\n    - 简单的对比: [对比分析](https://github.com/mrdulin/blog/issues/42)\n    - 官网链接： https://reacttraining.com/react-router/web/guides/quick-start\n- react-redux\n    - Redux官方提供的React绑定库,连接组件和数据中心,也就是把React和Redux联系起来\n    - 主要用到Provider组件绑定数据store\n    - github网址： https://react-redux.js.org/\n- connected-react-router\n    - 和history一起，将路由器状态与redux存储同步。\n    - git官网：https://github.com/supasate/connected-react-router\n- history\n    - 通过 connected-react-router 和 history 两个库将 react-router 与 redux 进行深度整合实现\n    - https://github.com/ReactTraining/history#readme\n- @rematch/core\n    - 在redux的基础上再次封装的，不需要再声明action 等配置，数据流管理更简单\n    - 官网链接： https://rematch.gitbook.io/handbook/\n- @rematch/loading\n    - 添加自动loading指示器effects到Rematch\n    - github地址： https://github.com/rematch/rematch/tree/master/plugins/loading\n- react-loadable\n    - 高阶组件-拆分应用程序、分成不同的包，根据需要动态加载他们\n    -github地址： https://github.com/jamiebuilds/react-loadable\n- app/index.html 在app文件夹下创建index.html作为入口html文件\n    贴上如下代码\n    ```\n    \u003c!doctype html\u003e\n    \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\"\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\"\u003e\n        \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n        \u003ctitle\u003eDocument\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n    \u003c!-- 项目将被挂在带root上 --\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003c/body\u003e\n    \u003c/html\u003e\n    ```\n- app/index.js 在app文件夹下创建index.js 作为应用的根组件\n    贴上如下代码\n    ```\n    import React, {Component} from 'react';\n    import ReactDOM from 'react-dom';\n    import PropTypes from 'prop-types';\n\n    class App extends Component {\n        render() {\n            return (\n                    \u003cdiv\u003e\n                        Hello React!\n                    \u003c/div\u003e\n            )\n\n        }\n    }\n\n    /**\n     * 1、获取应用的根dom节点\n     * 2、通过reactDOM渲染到真实的dom节点上\n     */\n    const rootEl = document.getElementById('root');\n    ReactDOM.render(\u003cApp /\u003e, rootEl);\n\n    ```\n### 配置开发环境-用来启动应用程序\n- 在package.json中的scripts字段下添加如下命令\n    ```\n    \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --config ./scripts/pack.dev.js\"\n    ```\n- 脚本解读\n    - npm 会寻找 当前目录下的 package.json 中的 scripts 字段的 dev 字段;\n    - 执行dev对应的字段值\n        - 使用cross-env为当前的node进程加一个自定义变量:NODE_ENV,这个变量值为:development, (webpack会读这个变量);\n        - 使用 webpack-dev-server 启动服务, 指定配置文件为: pack.dev.js\n\n\n### 配置生产环境-用来启动应用程序\n- 在package.json中的scripts字段下添加如下命令\n    ```\n    \"build\": \"cross-env NODE_ENV=production webpack --config ./scripts/pack.build.js\"\n    ```\n- 脚本解读\n    - npm 会寻找 当前目录下的 package.json 中的 scripts 字段的 build 字段;\n    - 执行build对应的字段值\n        - 使用cross-env为当前的node进程加一个自定义变量:NODE_ENV,这个变量值为:production, (webpack会读这个变量);\n        - 指定配置文件为: pack.build.js\n        - webpack会执行文件中的命令，打包生成build文件，\n- 此时的/scripts/pack.build.js文件下的配置如下\n    ```\n    const path = require('path');\n    const webpack = require('webpack');\n    const HtmlWebPackPlugin = require('html-webpack-plugin');\n    const MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n    const TerserPlugin = require('terser-webpack-plugin');\n    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');\n\n    /**\n     * webpack 配置\n     * https://webpack.js.org/configuration/#options\n     */\n    const buildConfig = {\n        /**\n         * 模式\n         * https://webpack.js.org/concepts/mode/\n         **/\n        mode: 'production',\n\n        /** ⽬目标环境\n         * https://webpack.js.org/configuration/target/#target\n         **/\n        target: 'web',\n\n        /**\n         * 程序的⼊⼝\n         * https://webpack.js.org/configuration/entry-context/#entry\n         **/\n        entry: path.join(__dirname, '../app/index.js'),\n\n        /**\n         * 启动开发服务 执行 npm run dev, 输出如下:\n         **/\n        output: {\n            path: path.join(__dirname, '../build'),\n            filename: '[name].js'\n        },\n\n        /**\n         * 插件\n         */\n        plugins: [\n            new HtmlWebPackPlugin({\n                template: './app/index.html',\n                filename: './index.html'\n            }),\n            new MiniCssExtractPlugin({\n                // Options similar to the same options in webpackOptions.output\n                // both options are optional\n                filename: '[name].[hash].css',\n                chunkFilename: '[id].[hash].css',\n            })\n        ],\n\n        /**模块\n         * https://webpack.js.org/configuration/module/\n         * */\n        module: {\n            rules: [\n                {\n                    test: /\\.(js|jsx)$/,\n                    exclude: /node_modules/,\n                    include: [path.join(__dirname, '../app')],\n                    use: [\n                        'babel-loader'\n                    ]\n                },\n                {\n                    test: /\\.(sa|sc|le|c)ss$/,\n                    use: [\n                        MiniCssExtractPlugin.loader,\n                        // 注意：此处顺序不能颠倒，webpack是自下而上解析，上一个 loader 把处理结果交给下一个\n                        // less-loader 将 less 转为 css,\n                        // css-loader 将 css 转为 style,\n                        // style-loader 将 style 转为 js字符串.最终通过style标签把样式插入到htmL中\n                        {loader: \"css-loader\"},\n                        {loader: 'less-loader'}\n                    ]\n                },\n                {\n                    test: /\\.(bmp|gif|jpg|jpeg|png|svg)$/,\n                    exclude: /node_modules/,\n                    use: [\n                        'file-loader'\n                    ]\n                },\n                {\n                    test: /\\.(eot|otf|ttf|woff|woff2|svg)$/,\n                    exclude: /node_modules/,\n                    use: [\n                        'file-loader'\n                    ]\n                }\n            ]\n        },\n\n        optimization: {\n            minimizer: [\n                new TerserPlugin({\n                    terserOptions: {\n                        ecma: 6,\n                        compress: true,\n                        output: {\n                            comments: false,\n                            beautify: false\n                        }\n                    }\n                }),\n                new OptimizeCSSAssetsPlugin({})\n            ]\n        }\n    };\n    module.exports = buildConfig;\n    ```\n### 生产环境下启动服务\n在 build 文件夹下使用 [http-server](https://github.com/indexzero/http-server) 启动服务:\n- cd react-iframe\n- 注意这⾥里里是全局安装, react-iframe不依赖 http-server\n- sudo npm i -g http-server\n- cd build  进入文件\n- http-server  在当前文件下启动服务\n- 输出如下，每个人的端口号和每次的端口号可能不一样\n    ```\n    Starting up http-server, serving ./\n    Available on:\n    http://127.0.0.1:8081\n    http://192.168.20.44:8081\n    Hit CTRL-C to stop the server\n    ```\n### 分包压缩，打包优化\n- 抽离 pack.dev.js 和 pack.build.js 中相同的配置\n    - scripts/pack.base.js放共用配置，pack.build.js和pack.dev.js引用该共用配置\n    - scripts/pack.dll.js放打包的引用文件执行脚本，运行npm run dll，生成dll静态文件，然后在pack.dev.js环境引用\n- 优化 npm run dev 的速度和热更新\n    - 主要依赖pack.dev.js完成\n- 优化 npm run build 的速度和文件体积\n    - 主要依赖压缩混淆等方法完成，生成生产环境的代码\n\n### 命令行介绍\n   - dev: 开发环境打包\n   - build: 生产环境打包\n   - lint: 检测代码是否符合规范\n   - lint:fix: 一键修复eslint检测到的不符合规范的代码\n   - dll:  打包生成dll静态文件，主要是打包一些第三方依赖的文件\n   - clear: 清除打包生成的build文件\n--------\n参考文档\n\n- babel中文官方推荐文档：https://babel.docschina.org/docs/en/\n- babel中文： http://guoyongfeng.github.io/my-gitbook/intro.html\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamsoncao%2Freact-iframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamsoncao%2Freact-iframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamsoncao%2Freact-iframe/lists"}