代码之家  ›  专栏  ›  技术社区  ›  CunningFatalist

Symfony安可:因果报应和*。vue组件

  •  1
  • CunningFatalist  · 技术社区  · 7 年前

    我目前正在准备一个新的Symfony应用程序,并希望使用Vue以及TypeScript和Karma进行测试。网页包Encore对设置Vue和TypeScript非常有帮助。 yarn encore dev --watch 等等,效果很好。我唯一的问题是我无法很好地利用业力 *.vue 文件夹。测试正常 *.ts 文件一点问题都没有。也许其他人也有类似的问题,知道该怎么办。

    我的 webpack.config.js 如下所示:

    var Encore = require('@symfony/webpack-encore');
    
    // Export runtime environment, if Encore is not available
    var isProduction = true;
    try {
      isProduction = Encore.isProduction();
    } catch (e) {
      console.log('No Encore environment found, configuring runtime environment');
      Encore.configureRuntimeEnvironment(
        'dev-server',
        {
          https: true,
          keepPublicPath: true,
        }
      );
    }
    
    Encore
      // directory where all compiled assets will be stored
      .setOutputPath('web/assets/build/')
    
      // what's the public path to this directory (relative to your project's document root dir)
      .setPublicPath('/web/assets/build')
    
      // empty the outputPath dir before each build
      .cleanupOutputBeforeBuild()
    
      // will output as web/build/app.bundle.js
      .addEntry('app.bundle', './src/assets/scripts/app.ts')
    
      // allow *.ts and *.vue files to be processed
      .enableTypeScriptLoader(options => {
        options.appendTsSuffixTo = [/\.vue$/];
        options.transpileOnly = true;
      })
    
      // will transpile Vue.js components
      .enableVueLoader(options => {
        options.loaders.ts = 'ts-loader!tslint-loader'
      })
    
      // enable tslint loader and show linting errors in the console
      // based on the "tslint-loader/vue-loader/ts-loader"-snippet:
      // https://github.com/palantir/tslint/issues/2099#issuecomment-292524819
      .addLoader({
        test: /\.ts$/,
        loader: 'tslint-loader',
        exclude: /(node_modules)/,
        enforce: 'pre',
        options: { typeCheck: true, configFile: './tslint.json' },
      })
    
      // will output as web/build/app.styles.css
      .addStyleEntry('app.styles', './src/assets/styles/app.scss')
    
      // allow sass/scss files to be processed
      .enableSassLoader()
    
      // Autoprefixer and other postcss plugins, see postcss.config.js
      .enablePostCssLoader(options => {
        options.config = {
          path: 'postcss.config.js',
        };
      })
    
      // Add source maps for dev
      .enableSourceMaps(!isProduction)
    ;
    
    // export the final configuration
    module.exports = Encore.getWebpackConfig();
    

    karma.conf.js 这样地:

    var webpackConfig = require('./webpack.config');
    
    module.exports = function (config) {
      config.set({
        basePath: '',
        frameworks: ['mocha', 'chai', 'sinon'],
        files: [
          'src/assets/scripts/**/*.spec.ts',
        ],
        exclude: [],
        preprocessors: {
          'src/assets/scripts/**/*.ts': ['webpack'],
        },
        webpack: {
          module: webpackConfig.module,
          resolve: webpackConfig.resolve,
        },
        webpackMiddleware: {
          noInfo: true,
          stats: 'errors-only',
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['PhantomJS'],
        singleRun: false,
        concurrency: Infinity,
      });
    };
    

    我已经花了无数个小时阅读文档并修复这个和那个。我还使用Vue CLI创建了示例项目,但我无法找出此设置的错误之处。以下测试文件运行良好:

    import { expect } from 'chai';
    import { App } from '../../core/App';
    
    
    describe('App Core', () => {
      let app: App;
    
      beforeEach(() => {
        app = new App();
      });
    
      it('should have a public app name', () => {
        expect(app.name).to.be.a('string');
        expect(app.name).to.be.equal('my test app');
      });
    
      it('should have a public app version', () => {
        expect(app.version).to.be.a('string');
      });
    
    });
    

    但是在这里, HelloWorldComponent 未定义:

    import { expect } from 'chai';
    import { VueConstructor } from 'vue';
    import HelloWorldComponent from '../../../components/vue/HelloWorld.vue';
    
    
    describe('HelloWorld.vue', () => {
    
      it('should be a valid Vue component', () => {
        expect(HelloWorldComponent).to.be.a(VueConstructor);
      });
    
    });
    

    解决方案或想法非常受欢迎。提前感谢!

    干杯

    1 回复  |  直到 7 年前
        1
  •  0
  •   CunningFatalist    7 年前

    感谢所有默默帮助我的人:)我发现了问题,需要一个插件,但没有加载:

    var webpackConfig = require('./webpack.config');
    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    
    module.exports = function (config) {
      config.set({
        basePath: '',
        frameworks: ['mocha', 'chai', 'sinon'],
        files: [
          'src/assets/scripts/**/*.spec.ts',
        ],
        exclude: [],
        preprocessors: {
          'src/assets/scripts/**/*.ts': ['webpack'],
        },
        webpack: {
          module: webpackConfig.module,
          resolve: webpackConfig.resolve,
          // This is the relevant bit:
          plugins: [
            new ExtractTextPlugin("app.styles.css") 
          ]
        },
        webpackMiddleware: {
          noInfo: true,
          stats: 'errors-only',
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['PhantomJS'],
        singleRun: false,
        concurrency: Infinity,
      });
    };
    

    现在很有魅力:)