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

gitlab上的CI/CD无法使用babel加载程序编译

  •  0
  • parohy  · 技术社区  · 6 年前

    webpack --mode production 它按照预期构建并创建一个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'));
    | 
    

    "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"
    }
    

    这是我的网页包配置:

    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/
    

    编辑 babel-loader 不在gitlab ci上工作。

    我还没有找到解决办法。到目前为止,您可以在github上拥有免费的私有repo,将项目迁移到github并 setup circleci . Circleci完美地为我工作。

    1 回复  |  直到 6 年前
        1
  •  0
  •   Harish Soni    6 年前

    添加

    "react": "^16.4.1",
    "react-dom": "^16.4.1"
    

    给你的 devDependencies

    由于您没有提供 react react-dom 中的模块 package.json

    让我知道它是否对你有用如果不行我们会期待这个问题

    更新:

    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 找不到的安装目录 反应 因此,在构建时传递安装命令将显式地提供模块。

        2
  •  0
  •   andyrandy    6 年前

    exclude: [/node_modules/, /build/]
    

    尝试将其替换为以下内容:

    exclude: '/node_modules/',
    include: [
        path.join(__dirname, 'src')
    ]
    

    Webpack build fails with Gitlab-CI