开启 gzip 压缩

开启 gzip 压缩

react懒加载

webpack v3 结合 react-router v4 做 dynamic import — 按需加载(懒加载) #3

登陆鉴权 2019.01.27

//todo 把jwt 鉴权的部分文章进行整理

//todo 路由懒加载 或者 更换更换 直接cdn引用的 markdown编辑器

//打包出来的main.js文件太大 实现: 后台接口访问时,对于接口的鉴权,如果未登录,则接口返回500

是否可以实现 后台跳转,当前认为不可以,因为后台的端口号与前台不一致,当前不依赖后台的接口展示html内容.

redux 应用

Redux之使用redux-thunk进行ajax请求发送 https://heiyu4585@dev.azure.com/heiyu4585/reduxDemo/_git/reduxDemo

https://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html#browserHistory)

Network is unreachable

connection refused because too many open connections: 204 问题待解决

'babel-node' 不是内部或外部命令,也不是可运行的程序或批处理文件。

你要直接运行 babel 命令,需要全局安装 babel-cli,

npm install -g babel-cli
babel --version
局部安装也可以

npm install babel-cli
.\node_modules\.bin\babel --version

Extract CSS from Javascript files with mini-css-extract-plugin

...
 rules : [
            {
                test: /\.s?[ac]ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { url: false, sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true } }
                ],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: "babel-loader"
            }
        ]
        ...
        
         plugins: [
                new MiniCssExtractPlugin({
                    filename: "style.css"
                })
                
            ],

Webpack 4: Extract CSS from Javascript files with mini-css-extract-plugin

babel 7 升级

升级
babel 升级工具修改配置
npx babel-upgrade --write

或是安裝 babel-upgrade 在 global 並執行

npm install babel-upgrade -g
babel-upgrade --write

复制代码可以看到 package.json 中移除了旧版本的依赖,自动新增了新版名称,.babelrc 文件的配置也会自动修改 但是不会删除已有的插件,如原来的 transform-decorators-legacy 修改所有 bable-polyfill 为 @babel/polyfill 因为 babel 7 新增的 @babel 命名空间,所以原来的 babel-polyfill 需要修改名称

// index.js 头部导入修改
import '@babel/polyfill'

babel 7 简单升级指南

github地址:

ReferenceError: regeneratorRuntime is not defined
There is already a very good answer here (originally posted on the Babel6 question) which I will just translate to Yarn. Basically you need babel runtime (NOT as a dev dependency) and the plugin transform-runtime

yarn add @babel/runtime 
yarn add -D @babel/plugin-transform-runtime
And, in .babelrc, add:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

Babel 7 - ReferenceError: regeneratorRuntime is not defined

react 服务端渲染 sass 报错

通常我们在前端开发时,会直接在 jsx 中引入 css, less 等样式文件。

// app.jsx import './style/app.less'; import './style/style.css'; 但是服务端却不能正确的处理这些文件,会引起服务端报错。 渲染 HTML 文档本身不需要 CSS 样式的参与,因此我们想办法忽略这些文件就可以了。

我们可以通过 babel-register 的插件 babel-plugin-transform-require-ignore 来忽略一些固定后缀的文件。下面让我们来扩充 app.js 中的 bable-register 配置。

require('babel-register')({
  presets: [
    'es2015',
    'react',
    'stage-2',
  ],
  plugins: [
    ['transform-runtime', {
      polyfill: false,
      regenerator: true,
    }],
    // babel-plugin-transform-require-ignore 插件
    // 可以使 node 忽略一些固定的后缀文件。
    [
      'babel-plugin-transform-require-ignore', {
        extensions: ['.less', '.sass', '.css'],
      },
    ],
  ],
  extensions: ['.jsx', '.js'],
});

其他:

  1. 客户端跟服务端用同一套 webpack 打包后的资源。webpack-isomorphic-tools 可以很好的解决这个问题,
  2. 或者最新的 webpack 版本 target: node 也能实现。(未实现)\
  3. png/jpg/font 等文件直接忽略(在 babel-register 里可以设置),scss/css的话,用 css in js 的方式写。 (网站链接)

第三种:

//ignore.js
const ignore=()=> {
  var extensions = ['.css', '.scss','.less','.png','.jpg','.gif']; //服务端渲染不加载的文件类型
  for (let i = 0, len = extensions.length; i < len; i++) {
    require.extensions[extensions[i]] = function () {
      return false;
    };
  }
}
module.exports = ignore;
//index.js
require('./ignore.js')();
require('babel-polyfill');

React 服务端渲染与同构

babel react-loadable UnhandledPromiseRejectionWarning:

Also be careful of not using babel-plugin-dynamic-import-node for Webpack build, else code splitting will not work. It is only required for server-side..babelrc中配置 "dynamic-import-node"

 {
   "presets": [
     "@babel/preset-env",
     "@babel/preset-react"
   ],
   "plugins": [
     "syntax-dynamic-import",
     "dynamic-import-node"
   ]
 }

UnhandledPromiseRejectionWarning on node v9.5.0