MSBuild và Webpack

Question

Tôi đang phát triển một ứng dụng Angular2 trong VS2015 và có một gói webpack và môi trường tối thiểu được thiết lập cho cùng một.

Đây là webpack.conf.js tôi

switch (process.env.NODE_ENV) { 
 
    case 'prod': 
 
    case 'production': 
 
     module.exports = require('./config/webpack.prod'); 
 
     break; 
 
    case 'test': 
 
    case 'testing': 
 
     //module.exports = require('./config/webpack.test'); 
 
     break; 
 
    case 'dev': 
 
    case 'development': 
 
    default: 
 
     module.exports = require('./config/webpack.dev'); 
 
}

Tôi cũng đã cài đặt một Á hậu nhiệm vụ webpack mà gọi này với các lệnh sau

cmd /c SET NODE_ENV=development&& webpack -d --color 

và

cmd /c SET NODE_ENV=production&& webpack -p --color 

Thiết lập có vẻ hoạt động tốt. Tuy nhiên, tôi muốn tích hợp điều này với TFS xây dựng CI của tôi. Lệnh webpack sẽ kích hoạt sau khi dự án được xây dựng và báo cáo lỗi xây dựng trong khi quá trình xây dựng webpack không thành công. Tôi đã cố gắng để kết hợp các đoạn mã sau vào file csproj tôi

<Target Name="AfterBuild"> 
<Exec Condition="$(Configuration) == 'Debug'" Command="cmd /c SET NODE_ENV=production&& webpack -p --color"> 
</Exec> 
</Target> 

Nó thất bại với một lỗi 9009

Sau đó tôi đã cố gắng, bắt đầu lệnh lên từ thư mục node_modules nơi webpack đã được cài đặt

<Target Name="AfterBuild"> 
<Exec Condition="$(Configuration) == 'Debug'" Command="./node_modules/.bin cmd /c SET NODE_ENV=production&& webpack -p --color"> 
</Exec> 
</Target> 

vẫn vô ích. Ngay cả khi tôi nhận được điều này để làm việc, tôi không chắc chắn nếu nó sẽ gây ra VS xây dựng thất bại nếu nó gặp một lỗi trong webpack.

Làm cách nào để tiếp tục với điều này?

Answer 1

Đặt các tập lệnh khác nhau trong package.json cho chế độ phát triển và sản xuất. Sau đó, trên sự kiện 'AfterBuild' của studio trực quan, hãy gọi những tập lệnh đó trên các cấu hình khác nhau.

Add sau hai kịch bản, 'buildDev' và 'buildProd' trong package.json:

"scripts": { 
    "buildDev": "SET NODE_ENV=development && webpack -d --color", 
    "buildProd": "SET NODE_ENV=production && webpack -p --color", 
    } 

Trong AfterBuild sự kiện của visual studio thêm hai lệnh có điều kiện:

<Target Name="AfterBuild"> 
    <Exec Condition="$(Configuration) == 'Debug'" Command="npm run buildDev" /> 
    <Exec Condition="$(Configuration) == 'Release'" Command="npm run buildProd" /> 
    </Target> 

Và cuối cùng là webpack.conf.js như sau:

switch (process.env.NODE_ENV.trim()) { 
    case 'prod': 
    case 'production': 
     module.exports = require('./config/webpack.prod'); 
     break; 
    case 'dev': 
    case 'development': 
    default: 
     module.exports = require('./config/webpack.dev'); 
     break; 
} 

Lưu ý quan trọng: Hãy chắc chắn để sử dụng chức năng trim() với process.env.NODE_ENV như cmd sẽ đối xử với không gian trống trong lệnh "SET NODE_ENV = phát triển & & webpack -d --color làm ký tự và nối thêm nó vào biến NODE_ENV. Vì vậy, khi chúng tôi đang thiết lập nó là 'phát triển', nó thực sự được thiết lập là (phát triển + khoảng trắng).

Answer 2

Để xây dựng TFS CI, bạn có thể tham khảo các bước sau để đạt được yêu cầu của mình.

1. Thêm bước NPM
2. Thêm Command Line bước

Lưu ý: Có lập luận -bail, được yêu cầu nếu không bước/nhiệm vụ sẽ được thành công mặc dù lệnh webpack ném ngoại lệ.

Ngoài ra, bạn có thể thêm biến trong định nghĩa xây dựng (tab biến)