gitlab上的CI/CD无法使用babel-loader编译 [英] CI/CD on gitlab fails to compile with babel-loader
问题描述
我有一个带有webpack的react应用.开发服务器按预期工作.当我在本地运行 webpack --mode production
时,它会按预期方式构建并创建一个js捆绑包.当我将其推送到gitlab时,它无法生成并显示以下错误:
I have a react app with webpack. Dev server works as expected. When I run locally webpack --mode production
it builds and creates a js bundle as expected. When I push it to gitlab it fails to build it with error:
ERROR in ./src/index.js 20:16
Module parse failed: Unexpected token (20:16)
You may need an appropriate loader to handle this file type.
| firebase.initializeApp(config);
|
> ReactDOM.render(<App />, document.getElementById('app'));
|
这些是我的devDependencies:
These are my devDependencies:
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-transform-flow-strip-types": "^7.2.3",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/plugin-proposal-decorators": "^7.2.3",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "8.2.6",
"babel-loader": "^8.0.4",
"copy-webpack-plugin": "4.6.0",
"css-loader": "0.28.11",
"eslint": "4.19.1",
"eslint-loader": "2.1.1",
"eslint-plugin-react": "7.11.1",
"html-webpack-plugin": "3.2.0",
"style-loader": "0.21.0",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
}
这是我的webpack配置:
And this is my webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'build'),
filename: 'index.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: [/node_modules/, /build/],
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devServer: {
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html'
}),
new CopyWebpackPlugin([
{ from: path.join(__dirname, 'public/'), to: path.join(__dirname, 'build') }
])
]
};
这以前是可行的,但是我更新了库已经很过时了.更新后,gitlab ci失败.
This was working previously but I updated the libraries was out of date quite much. After update the gitlab ci fails.
这是构建配置:
image: node:latest
cache:
paths:
- node_modules/
stages:
- setup
- build
setup:
stage: setup
script:
- echo "Setup started"
- yarn install
artifacts:
paths:
- node_modules/
build:
stage: build
script:
- yarn build
artifacts:
paths:
- build/
编辑我已经遍历了index.js,所以输入的内容可能不好,但是随后在组件内部出现了很多错误,这些错误无法解析jsx标签.我怀疑 babel-loader
在gitlab-ci上不起作用.
EDIT
I have transpired index.js so maybe the entry is not good or something, but then I got a bunch of errors inside components that it cannot resolve jsx tags. I suspect babel-loader
is not working on gitlab-ci.
编辑29.3.2019 我还没有找到解决方案.截至您可以在github上获得免费的私有存储库,将项目迁移到github和
EDIT 29.3.2019 I haven't find a solution for this. As of you can have free private repos on github, migrated the project to github and setup circleci. Circleci work for me flawlessly.
推荐答案
我在Gitlab CI上遇到了同样的问题,发现排除是问题所在:
I just had the same issue with Gitlab CI and found out that the exclude was the problem:
exclude: [/node_modules/, /build/]
尝试将其替换为以下内容:
Try replacing it with the following:
exclude: '/node_modules/',
include: [
path.join(__dirname, 'src')
]
现在它可以在本地运行,也可以在Gitlab CI上运行.以前,它仅在本地工作.
It now works locally AND on Gitlab CI for me. Before, it only worked locally.
还有另一个问题向我指出了正确的方向:使用Gitlab构建Webpack失败-CI
There is another issue that pointed me to the right direction: Webpack build fails with Gitlab-CI
这篇关于gitlab上的CI/CD无法使用babel-loader编译的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!