Javascript gitlab上的CI/CD无法使用babel loader编译
我有一个带有网页包的react应用程序。Dev服务器按预期工作。当我在本地运行Javascript gitlab上的CI/CD无法使用babel loader编译,javascript,reactjs,webpack,babeljs,gitlab-ci,Javascript,Reactjs,Webpack,Babeljs,Gitlab Ci,我有一个带有网页包的react应用程序。Dev服务器按预期工作。当我在本地运行webpack--modeproduction时,它会按照预期构建并创建一个js包。当我将其推送到gitlab时,它无法构建它,并出现错误: 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. | f
webpack--modeproduction
时,它会按照预期构建并创建一个js包。当我将其推送到gitlab时,它无法构建它,并出现错误:
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'));
|
这是我的网页配置:
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将失败
这是构建配置:
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上不起作用
编辑2019年3月29日
我还没有找到解决这个问题的办法。截至,您可以在github上进行免费的私有回购,并将项目迁移到github和。Circleci完美地为我工作。添加
"react": "^16.4.1",
"react-dom": "^16.4.1"
到您的devdependency
,它应该可以工作
由于您没有在package.json
中提供react
和react dom
模块,因此出现了错误
让我知道它是否适合你,如果不适合,我们将期待这个问题
更新:
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 install react
- yarn install react-dom
- yarn build
artifacts:
paths:
- build/
将安装命令直接添加到脚本中可以解决此问题。
不知何故,您的
webpack
找不到react
和react dom
的安装目录,因此在构建时传递安装命令将显式提供模块。我刚刚遇到Gitlab CI的相同问题,并发现排除是问题所在:
exclude: [/node_modules/, /build/]
尝试将其替换为以下内容:
exclude: '/node_modules/',
include: [
path.join(__dirname, 'src')
]
它现在可以在本地和Gitlab CI上为我工作。以前,它只在本地起作用
还有一个问题为我指明了正确的方向:我在依赖项中有这些问题。我只是没有把它复制到这个问题上,因为有20多个依赖项应该在你的依赖项中。当
GitLab
执行您的脚本时,它会从devdependences
安装依赖项。但是我在运行时也需要这两个依赖项,它不会破坏包。json在两个字段中都有它们吗?不会,我在GitLab中有自己的项目,带有CI/CD,我面临的问题与您面临的问题相同。这个问题的原因是我们没有添加devdependency,它也没有安装react,然后尝试一下,如果作业
失败,我们将查看是否有任何中断
exclude: '/node_modules/',
include: [
path.join(__dirname, 'src')
]