小编fl0*_*zle的帖子

我们安装了karma,它使用mocha和chai进行测试.我们正在尝试使用karma-babel-preprocessor将babel直接整合到业力中,以便将我们的ES6文件转换为ES5来运行.使用mocha单独使用babel,即mocha测试命令,但我们尝试使用karma而不是它不起作用.

karma.conf.js片段:

frameworks: ['mocha', 'chai'],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
   'src/**/*.js': ['babel'],
   'test/**/*_spec.js': ['babel']
},

"babelPreprocessor": {
    options: {
        presets: ['es2015'],
        sourceMap: 'inline'
    },   
    filename: function(file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
    },
    sourceFileName: function(file) {
        return file.originalPath;
    }
},

// list of files / patterns to load in the browser
files: [
  'src/**/*.js',
  'test/**/*_spec.js'
],

package.json片段:

"scripts": {
  "test": "./node_modules/karma/bin/karma start karma.conf.js"
},

"babel": {
  "presets": ["es2015"]
},

"devDependencies": { …

在我的索引文件中，我有以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我正在使用 React 加载页面，但主索引文件是 HTML 文件。(.哈巴狗)

这已正确插入到 DOM 中。但是，视口被忽略 - 我的页面显示桌面版本。

如果我在 Chrome 开发工具中编辑 DOM，例如。将 1 更改为 1.0 或元标记的任何其他部分，都会导致页面重新正确计算视口，然后立即正确显示。有任何想法吗？

您可能需要单击图像才能查看 GIF 动画。

我正在使用create-react-app v2。

我有一个带有几个类名的组件：“ x15 x14 login-form__field”。在HTML中，两种环境中它们的顺序相同。

在生产版本中，“。x14”比“ login-form__field”的优先级更高。它们在开发中是相反的（正确的）。有任何想法吗？我知道webpack会进行一些吊装和后处理，但不确定为什么会影响它。

干杯

-更新-

我刚刚注意到，自定义类以内联样式加载，这就是为什么它获得优先级的原因。我认为webpack正在这样做。无论如何，我们可以告诉webpack / CRA将样式加载为样式表-而不是内联。否则，这意味着样式不代表生产。

-第二次更新-

Create-react-app将'styleLoader'用于dev中的内联样式以进行热重载，并且仅生成CSS用于生产。这是有道理的。