问题描述
我需要部署一个Web应用程序，该Web应用程序与打字稿反应。 deploy方法是构建运行nginx服务器的docker映像，该服务器为静态构建提供服务，并将其保存在kubernetes容器中。
构建脚本为craco build，并且在本地终端（macOS）中运行时可以正常运行。问题是当在Docker映像中运行相同的脚本时，它将返回错误：
Creating an optimized production build...
Failed to compile.
./src/views/main/routeConfigs.ts
Syntax error: Unexpected token : (7:25)
routeConfig.ts文件的头是
import { vueCompsInReact } from '@console/legacy-v1/vueDMZ';
import { IRoute } from 'models/router.models';
import { wrapReactifiedVueComponent } from 'views/common/routing/wrapReactifiedVueComponent';
import { ROUTE_KEY } from '../routes';
import Home from './Home';
export const MAIN_ROUTES: IRoute<ROUTE_KEY>[] = [{
routeKey: ROUTE_KEY.R_HOME,path: '/',exact: true,component: Home,},...
，Unexpected token : (7:25)是export const MAIN_ROUTES: IRoute<ROUTE_KEY>[]行中的冒号'：'
我不明白的是，它仅在docker中失败。 Dockerfile是：
FROM node:12-alpine as builder
# define PROJECT_PATH to project
ENV PROJECT_PATH=packages/console-core
ENV V1_PATH=legacy-v1
ENV APP_ROOT=/console-v2
RUN node -v
RUN mkdir ${APP_ROOT}
WORKDIR ${APP_ROOT}
# copy root package to install dependencies
COPY .nvmrc .stylelintrc.js package.json package-lock.json lerna.json ./
# copy console core package
RUN mkdir ./packages
RUN mkdir ./${PROJECT_PATH}
COPY ${PROJECT_PATH}/package.json ${PROJECT_PATH}/package-lock.json ${PROJECT_PATH}/craco.config.js ./${PROJECT_PATH}/
# copy console v1 package
RUN mkdir ./${V1_PATH}
COPY ${V1_PATH}/package.json ${V1_PATH}/package-lock.json ./${V1_PATH}/
# install dependencies
RUN npm install
RUN npx lerna bootstrap
COPY ${V1_PATH} ./${V1_PATH}
COPY ${PROJECT_PATH} ./${PROJECT_PATH}
# RUN cd ${PROJECT_PATH}
WORKDIR ${PROJECT_PATH}
RUN npm run build
使用命令RUN node -v，我可以看到node:12-alpine映像带有节点12.18.3版本，而在本地则为12.14.0
package.json文件为
{
"name": "@console/core","version": "2.0.0","private": true,"description": "Core package of the web console","scripts": {
"start": "craco start","build": "craco build","serve": "serve -s build","test": "npm run lint && craco test --transformIgnorePatterns \"node_modules/(?!(@snipsonian))\"","eslint": "eslint --ext .js,.ts,.tsx src","stylelint": "stylelint src/**/*.scss","lint": "npm run eslint"
},"dependencies": {
"@console/legacy-v1": "^0.1.0","@material-ui/core": "^4.11.0","@material-ui/icons": "^4.9.1","@snipsonian/browser": "^1.12.0","@snipsonian/core": "^1.11.0","@snipsonian/dvlp": "^1.12.0","@snipsonian/observable-state": "^1.12.0","@snipsonian/react": "^1.12.0","@snipsonian/react-observable-state": "^1.12.0","clsx": "^1.1.1","flat": "^5.0.0","gsap": "^3.5.1","history": "^5.0.0","immer": "^7.0.1","oidc-client": "^1.10.1","ramda": "^0.27.0","react": "^16.13.1","react-dom": "^16.13.1","react-router-dom": "^5.2.0","reselect": "^4.0.0"
},"devDependencies": {
"@craco/craco": "^5.6.4","@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.5.0","@testing-library/user-event": "^7.2.1","@types/flat": "^5.0.1","@types/history": "^4.7.6","@types/jest": "^24.9.1","@types/node": "^12.12.47","@types/ramda": "^0.27.7","@types/react": "^16.9.36","@types/react-dom": "^16.9.8","@types/react-router-dom": "^5.1.5","copy-webpack-plugin": "^6.0.3","eslint": "^6.8.0","http-proxy-middleware": "^1.0.4","node-sass": "^4.14.1","react-scripts": "3.4.1","serve": "^11.3.2","stylelint": "^13.6.0","vue-loader": "^15.9.3","vue-template-compiler": "^2.6.11","winston": "^3.3.3","yaml-loader": "^0.6.0"
},"eslintConfig": {
"extends": "react-app"
},"browserslist": {
"production": [
">0.2%","not dead","not op_mini all","last 2 chrome version","last 2 firefox version","last 2 safari version","not ie <= 11"
],"development": [
"last 1 chrome version","last 1 firefox version","last 1 safari version"
]
}
}
craco.config.js文件为：
/* eslint-disable @typescript-eslint/no-var-requires */
const { ESLINT_MODES,addBeforeLoader,loaderByName,getLoader } = require('@craco/craco');
const path = require('path');
// eslint-disable-next-line import/no-extraneous-dependencies
const StyleLintPlugin = require('stylelint-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const CopyPlugin = require('copy-webpack-plugin');
const appSrc = path.resolve(__dirname,'src');
const imagesConsoleV1 = path.resolve(__dirname,'../../legacy-v1/public/img');
module.exports = {
eslint: {
mode: ESLINT_MODES.file,webpack: {
alias: {
/**
* Add the aliases for all the top-level folders in the `src/` folder.
* In combination with tsconfig.pathsOverride.json
* See https://resir014.xyz/posts/2019/03/13/using-typescript-absolute-paths-in-cra-20/
*/
api: `${appSrc}/api/`,config: `${appSrc}/config/`,models: `${appSrc}/models/`,state: `${appSrc}/state/`,utils: `${appSrc}/utils/`,views: `${appSrc}/views/`,plugins: [
new VueLoaderPlugin(),new StyleLintPlugin({
configBasedir: __dirname,context: appSrc,files: ['**/*.scss'],}),new CopyPlugin({
patterns: [
{
from: imagesConsoleV1,transformPath(targetPath) {
return `img/${targetPath}`;
},],configure: (webpackConfig /*,{ env,paths } */) => {
// console.log('webpackConfig',JSON.stringify(webpackConfig));
/**
* Loader-execution-order is from bottom to top!
* And from right to left!
*/
/* making sure the file-loader does not handle the .vue files */
const getFileLoaderResult = getLoader(
webpackConfig,loaderByName('file-loader'),);
if (getFileLoaderResult.isFound) {
const { match } = getFileLoaderResult;
// console.log('file-loader found',match.loader);
// console.log(match.loader.exclude);
/* orig value: exclude: [ /\.(js|mjs|jsx|ts|tsx)$/,/\.html$/,/\.json$/ ],*/
match.loader.exclude = [ /\.(js|mjs|jsx|ts|tsx|vue)$/,/\.json$/ ];
}
/* the yaml loader has to be placed 'before' (above) the file-loader
* so that the yaml-loader is used on .yaml files instead of the file-loader (oneOf) */
const yamlLoader = {
test: /\.ya?ml$/,type: 'json',// Required by Webpack v4
use: 'yaml-loader',};
addBeforeLoader(webpackConfig,yamlLoader);
/* adding the vue-loader
* p.s. Doing it myself instead of "addBeforeLoader(webpackConfig,loaderByName('babel-loader'),vueLoader)"
* because that adds the vueLoader inside te oneOf array instead of on the top-level.
* Also "addAfterLoader" did not produce the expected behaviour. */
// webpackConfig.resolve.alias['vue$'] = 'vue/dist/vue.esm.js';
const vueLoader = {
test: /\.vue$/,loader: 'vue-loader',};
webpackConfig.module.rules.splice(0,vueLoader); // adding it as the first element
// console.log('webpackConfig.module',JSON.stringify(webpackConfig.module));
return webpackConfig;
},jest: {
configure: {
moduleNameMapper: {
/**
* Jest module mapper which will detect our absolute imports.
* In combination with tsconfig.pathsOverride.json
* See https://resir014.xyz/posts/2019/03/13/using-typescript-absolute-paths-in-cra-20/
*/
'^api(.*)$': '<rootDir>/src/api$1','^config(.*)$': '<rootDir>/src/config$1','^models(.*)$': '<rootDir>/src/models$1','^state(.*)$': '<rootDir>/src/state$1','^utils(.*)$': '<rootDir>/src/utils$1','^views(.*)$': '<rootDir>/src/views$1',/**
* For the jest unit tests,we replace the vueDMZ (which serves as an entrypoint to the legacy v1 code)
* with a mock version,because otherwise jest has problems with the library imports in the legacy code
* (and problems with the vue code).
*/
'@console/legacy-v1/vueDMZ': '<rootDir>/../../legacy-v1/vueDMZ.jestMock',babel: {
plugins: [
"@babel/plugin-proposal-optional-chaining",};
我不是Web应用程序专家，我的问题是Docker映像中可能缺少哪些设置或本地启用的功能，这是导致此错误的原因，我理解这是“无法解析最新的打字稿语法”
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...