小编Tha*_*ric的帖子

我开始使用Webpack作为学生项目,但是我无法配置Webpack以包含React和Babel.这是我的节点包:

+-- babel-core@6.18.0
+-- babel-loader@6.2.5
+-- babel-polyfill@6.16.0
+-- babel-preset-es2015@6.18.0
+-- react@15.3.2
+-- react-dom@15.3.2
`-- webpack@1.13.2

...和m'y webpack配置文件:

module.exports = {
    entry: ['babel-polyfill', './src/index.jsx'],
    output: {
        path: './build',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

但是webpack命令显示了这个错误:

ERROR in ./src/index.jsx
Module build failed: ReferenceError: [BABEL] C:\wamp\www\tripfighter\src\index.jsx: Unknown option: C:\wamp\www\tripfighter\node_modules\react\react.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error …

我试图找到解决循环依赖问题的方法。在我的 Vuejs 应用程序中，我想要一个makeUrl(url)通过在开头添加 $router.base 值来计算给定参数的绝对 url 的函数。

所以我把它放在我的模块中routes.js：

const router = new VueRouter({
    base: '/subdirectory',
    //...
});

function makeUrl(url){
    return router.base + url;
}

export {makeUrl};
export default router;

routes.js导入到main.js我的应用程序的入口点，我在其中创建 Vue 主实例。

在routes.js我导入我的页面组件中，它导入了所有其他组件。在其中一些中，我需要使用makeUrl()我定义的函数。但我无法导入，routes.js因为它会创建循环导入。

我无法makeUrl()在另一个模块中移动我的函数，因为我需要访问 Vue-router 实例，所以我必须routes.js再次导入另一个模块 => 循环导入。

所以，我听说了$router变量，所以我尝试构建一个包含makeUrl()函数的实用程序组件：

//util-component.js
'use strict';

import Vue from 'vue/dist/vue';

const UtilComponent = Vue.component('util-component', {
  methods: {
      makeUrl(url){
          return this.$router.base + url;
      } …

我用来react-native-webview在我的 React Native 应用程序中呈现 WebView。在 iOS 上一切正常，但在 Android 上，当 WebView 呈现时，我的屏幕闪烁（黑色，然后白色，然后显示网页）。

根据这个答案，我尝试添加myandroid:hardwareAccelerated="false"的<application>标签AndroidManifest.xml，但这并不能解决我的问题。（此外，它隐藏了使用elevationstyle 属性创建的所有阴影效果）

<DelayedComponent key={key} style={{ height: 200, ...style }}>
  <WebView
    style={{ alignSelf: "stretch" }}
    source={{ uri: /* a youtube url */ }}
    renderLoading={() => <Loading />}
    startInLoadingState={true}
    scrollEnabled={false}
  />
</DelayedComponent>

<DelayedComponent>只是一个测试组件，<WebView>在一秒后呈现（使用基本的 setTimeout）。

export class DelayedComponent extends React.PureComponent<
  { delay?: number; renderLoading?: any } & ViewProps,
  { show: boolean }
> {
  constructor(props) {
    super(props); …

我有一个HeaderSubmenu组件，如果单击一个按钮，它可以显示/隐藏下拉菜单。好的，但是现在我尝试找到一个好的解决方案，使用户单击应用程序中的任意位置而不单击此下拉菜单时，它就会隐藏。

我正在将Vue 2.3.3与Vuex和VueRouter一起使用。

我的应用程序入口点：

'use strict';

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';

Vue.use(VueRouter);
Vue.use(Vuex);

import store_data from 'store';
import {router} from 'routes';

import App from 'app.vue';

var store = new Vuex.Store(store_data);

new Vue({
  el: '#app',
  store,
  router: router,
  render: function (createElement) {
    return createElement(App)
  }
})

HeaderSubmenu组件模板：

<template>
  <li class="header-submenu">
    <!-- button to show/hide the drop-down menu -->
    <header-link v-bind="$props" :href="to ? false : '#'" @click.native="toggleMenu()">
      <slot name="item"></slot>
    </header-link>
    <!-- drop-down menu --> …

这是一个使用@vue/cli. 我想用来vue-svg-loader加载内联 Svg 作为 vue 组件。

正如vue-svg-loader 安装指南所说，我把这段代码放在vue.config.js：

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};

并导入我的 Svg 文件import ViwanMap from '@/assets/ViwanMap.svg';。

另外，我shims-svg.d.ts在我的src/文件夹中创建了一个包含：

import { VNode } from 'vue';
declare global {
  type Svg = VNode; // With vue-svg-loader, imported svg is a Vue component.
}

declare module '*.svg' {
  const content: Svg;
  export default content;
} …