dvajs / babel-plugin-dva-hmr Goto Github PK

View Code? Open in Web Editor NEW

71.0 71.0 17.0 26 KB

Hmr babel plugin for dva.

JavaScript 98.15% Makefile 1.85%

babel-plugin-dva-hmr's People

Contributors

Stargazers

Watchers

Forkers

zinkey bigbigbo sltenorio99 joaner shengbeiniao liuqing650 dionid bigsungorgeous weizai118 yuez-sky lf7817 dickeylth liuqingyou123 ai2hub v-rr zlongcoding

babel-plugin-dva-hmr's Issues

Resolve container automatically, don't need to pass in

TypeError: _meta.app.unmodel is not a function

/******/ cb(moduleOutdatedDependencies);

dva里面 model文件的热更新不生效，刷新浏览器就可以了。哪里配错了？
subscriptions里面也return了unlisten

Crash when app.router() return jsx component

Code:

app.router(() => <App />);

Error:

webpack 4 + Babel 7 + dva 使用hmr无效

`.babelrc`配置如下

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": "cjs",
        "useBuiltIns": "usage",
        "corejs": 3,
        "targets": {
          "ie": 11
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "dva-hmr"
    ],
    [
      "add-module-exports",
      {
        "addDefaultProperty": true
      }
    ],
    //识别class组件
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "@babel/plugin-transform-runtime",
      {
        // corejs: 3 also supports instance properties (e.g. [].includes)
        // https://babeljs.io/docs/en/next/babel-plugin-transform-runtime.html#corejs
        "corejs": {
          "version": 3,
          "proposals": true
        },
        // 保留ESModules，交给preset-env去处理modules
        "useESModules": true
      }
    ],
    //支持import 懒加载
    [
      "@babel/plugin-syntax-dynamic-import"
    ],
    //antd按需加载  true是less，如果不用less style的值可以写'css'
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "lib",
        "style": true
      },
      "ant"
    ],
  ]
}

webpack.config.js

  devServer: {
    hot: true,
    overlay: true,
    host: CONFIG.host,
    stats: "errors-only",
    disableHostCheck: true,
    historyApiFallback: true,
    port: CONFIG.port || 8000,
    contentBase: CONFIG.output,
  },

版本信息

"dva": "^1.1.0",
"@babel/core": "^7.5.5",
"babel-loader": "^8.0.6",
"babel-plugin-dva-hmr": "^0.4.2",
"webpack": "^4.39.3",

附

项目为旧项目升级，dva版本不敢随意乱动

安装的依赖同npm插件页介绍一样

npm install babel-plugin-dva-hmr [email protected] --save-dev

@sorrycc 大佬有时间帮忙看看，谢谢您！

TypeScript Support?

How to use this plugin with typescript + babel + dva?

Example for use with plain webpack

Please, can you provide an example of using it without the atool-build. How can I use it with plain webpack configuration?

Currently I have the following webpack.config.js file ported from my redux project:

var webpack = require('webpack');
var path = require('path');

var entry = {};
entry['app'] = ['./app'];

if(process.env.NODE_ENV === 'development') {
  var hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000';
  entry['app'].push(hotMiddlewareScript);
}

module.exports = {
  entry: entry,
  output: {
    path: path.join(__dirname, 'build'),
    publicPath: '/',
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    },
    {
      test: /\.(png|jpg|svg|gif)$/,
      loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
    },
    {
      test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
      loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
    },
    { test: /\.html$/, loader: "url-loader!file-loader" },
    { test: /\.css$/, loader: "style-loader!css-loader" },
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    hot: true,
    historyApiFallback: true,
    contentBase: './'
  },
  debug: true,
  devtool: '#source-map',
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
      }
    }),
    new webpack.NoErrorsPlugin()
  ]
};

webpack搭建的dva项目，应该如何正确使用 dva-hmr

使用的webpack.config.js 配置的dva 项目，有在 .babelrc 里面配置 dva-hmr(没有使用 .roadhog 进行配置，直接使用的 [email protected])

但是实际开发时只走了 webpack 默认的热替换，并没有走 dva-hmr，使得修改 ./models/*.js 下的文件时会报如下错误

index.js:2178 Unexpected key "home" found in preloadedState argument passed to createStore. 
Expected to find one of the known reducer keys instead: "routing", "@@dva". Unexpected keys will be ignored.

有没有可能提供一种正确的使用方法呢？

配置文件

.babelrc 文件配置如下

{
  "presets": [
    "react",
    "stage-0",
    "es2015"
  ],
  "comments": true,
  "plugins": [
    "add-module-exports",
    "syntax-dynamic-import",
    "transform-decorators-legacy",
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
      }
    ],
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ],
  "env": {
    "development": {
      "plugins": [
        "dva-hmr",
        "transform-runtime"
      ]
    }
  }
}

webpack 配置

devServer: {
    contentBase: path.join(__dirname, "public"),
    compress: true,
    historyApiFallback: true, 
    hot: true,
    quiet: true,
    overlay: true
  },

entries 参数的疑问

我在 webpack.config.js 中对 hmr 的配置如下：

webpackConfig.babel.plugins.push(['dva-hmr', {
      entries: [
        './src/index.js',
        './src/login.js',
      ],
      container: '#root',
      quiet: false,
    }]);

因为多个入口文件的存在，所以我在 entries 写入了两个路径。但是最终的效果只有写在第一个位置的生效了，达到了不刷新页面更新DOM的效果，后面的入口文件对应的页面每次修改完页面还是会刷新。
请问这是怎么一回事？谢谢！

create-react-app 中使用dva-hmr

在create-react-app中配置dva-hmr还是整页刷新

module.exports = function override(config, env) {
// .....
  if (env === 'development') {
    config = injectBabelPlugin(['dva-hmr'], config);
  } 
// .....
};

`cannot read property 'file' of undefined` errors when project uses Babel 7

After an upgrade of a work project Babel 7, we experienced cannot read property 'file' of undefined errors with this plugin and webpack wouldn't compile.

Proposed Fix: #13

[babel-plugin-dva-hmr][WARN] can't get router path in

使用dva-cli手脚架搭建好之后，配置dva-hmr启动之后报警告

Starting the development server...

[babel-plugin-dva-hmr][WARN] can't get router path in D:\demows\demos\erp-admin\client\js\index.js
Compiled successfully!

You can now view Your App in the browser.

  Local:            http://localhost:8000/
  On Your Network:  http://192.168.15.159:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.

页面打开后显示 “ Yay! Welcome to dva! ” 和一张大图

修改index.js文件

app.router(require('./router').default); ==> app.router(require('./router'));

重新编译之后，页面就显示报错，但是控制台的WARN变成了INFO

[babel-plugin-dva-hmr][INFO] got routerPath ./router

这是报错信息

[app.router] router should be function, but got object
▶ 2 stack frames were collapsed.
(anonymous function)
D:/demows/demos/erp-admin/client/js/index.js:12
   9 | 
  10 | (function () {
  11 |   console.log('[HMR] inited with babel-plugin-dva-hmr');
> 12 |   app.router(require('./router'));
  13 |   app.use({
  14 |     onHmr: function onHmr(render) {
  15 |       if (module.hot) {
View compiled
defineProperty.value
D:/demows/demos/erp-admin/client/js/index.js:43
  40 |       }
  41 |     }
  42 |   });
> 43 | })(); // 5. Start
  44 | 
  45 | 
  46 | app.start('#root');
View compiled
▶ 6 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

是不是dva和dva-hmr没有对default做同样的处理？

支持放在 babel-plugin-transform-runtime 后面

entry变为数组热加载失效了

entry: { main: ['@babel/polyfill','./src/index.js'] },
入口改成这样后，热加载失效了，改成
entry: './src/index.js'，
就行，怎么整？？

how to define reload frequency or timeout

how to define reload frequency or timeout
as it !
thanks

Support require('./router').default

ERR_CONNECTION_REFUSED

Hi，

出现错误 http://127.0.0.1:8000/__webpack_hmr net::ERR_CONNECTION_REFUSED

listen address 如何更改？谢谢

What's wrong with that.

[babel-plugin-dva-hmr][WARN] can't get router path in F:\workspace\webstorm\xgj-dva-app\src\index.js

My .webpackrc config is below.

{ "entry": "src/index.js", "disableCSSModules": false, "publicPath": "/", "theme": { "@primary-color": "#1DA57A", "@link-color": "#1DA57A", "@border-radius-base": "2px", "@font-size-base": "16px", "@line-height-base": "1.2" }, "extraBabelPlugins": [ [ "import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" } ] ], "env": { "development": { "extraBabelPlugins": ["dva-hmr"] } } }

opts is undefined when no router found

https://github.com/dvajs/babel-plugin-dva-hmr/blob/81a5c84/src/index.js#L119